Auth Form

Sign-in 9

About

A presentation-only sign-in / sign-up form that progressively reveals the password field, animates between modes, and morphs its submit button through submitting/success/error states.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Auth Form to your project and fits it to your theme.

Code

How Auth Form is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import AuthForm from "@/components/ui/auth-form";
import { Globe, Mail } from "lucide-react";
import { useState } from "react";

export default function Demo() {
  const [mode, setMode] = useState<"sign-in" | "sign-up">("sign-in");
  const [status, setStatus] = useState<
    "idle" | "submitting" | "success" | "error"
  >("idle");

  const handleSubmit = () => {
    setStatus("submitting");
    setTimeout(() => setStatus("success"), 1200);
  };

  return (
    <div className="flex w-full items-center justify-center p-8">
      <AuthForm
        mode={mode}
        onModeChange={setMode}
        onSubmit={handleSubmit}
        status={status}
        providers={[
          {
            id: "google",
            label: "Google",
            icon: <Globe className="h-4 w-4" />,
          },
          {
            id: "email",
            label: "Email link",
            icon: <Mail className="h-4 w-4" />,
          },
        ]}
      />
    </div>
  );
}