Shadcn.io is not affiliated with official shadcn/ui
Login Email First
Progressive React email-first authentication block for Next.js with two-step flow showing email input first then password entry with email badge, back navigation, and slide transitions using shadcn/ui Input, Button, Badge, Tailwind CSS, and framer-motion AnimatePresence
Streamline your authentication UX with this React and Next.js email-first login block. Step one collects just the email address. Step two reveals the password field with the email displayed as a badge above. Slide transitions between steps use framer-motion AnimatePresence. Built with TypeScript, shadcn/ui Input, Button, Label, and Badge components, and Tailwind CSS. Follows the pattern used by Google, Microsoft, and Apple for their sign-in flows.
Related Components
Login Multi Step
Three-step sign-in wizard
Login Progress Steps
Progress bar multi-step flow
Login Minimal
Single-step email password form
Login Enterprise SSO
Domain-based SSO discovery
Login Passwordless
Passwordless method selector
FAQ
Was this page helpful?
Sign in to leave feedback.
Duo Security
Duo Security push notification React authentication block for Next.js with push sent animation, approve on phone prompt, method switcher for SMS and call, and timeout countdown using shadcn/ui, Tailwind CSS, and framer-motion
Emergency Access
Emergency break-glass access React authentication block for Next.js with warning banner, emergency code input, reason selection, audit trail notice, and confirmation dialog using shadcn/ui, Tailwind CSS, and framer-motion