Auth Modal

Sign-in 90

About

An animated authentication modal with social login buttons and email sign-in, opened from a trigger button.

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

Code

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

Usage.tsx

import { AuthModal } from "@/components/ui/auth-modal";

export default function AuthModalDemo() {
  return (
    <div className="flex min-h-[400px] w-full items-center justify-center">
      <AuthModal
        triggerText="Sign up / Sign in"
        onLogin={(provider) => console.log(`Login with ${provider}`)}
      />
    </div>
  );
}