Shadcn.io is not affiliated with official shadcn/ui
Login Forgot Password
Password recovery React form block for Next.js with email input, send reset link button, animated success state with mail icon, and crossfade transition using shadcn/ui, Tailwind CSS, and framer-motion AnimatePresence
Help users recover account access with this React and Next.js password reset block. Users enter their email to receive a reset link. The form crossfades to a success state with a mail icon and check-your-email message using framer-motion AnimatePresence. Includes a back-to-sign-in navigation link. Built with TypeScript, shadcn/ui Input, Button, and Label components, and Tailwind CSS. A must-have companion to any login form.
Related Components
Login Magic Link
Passwordless email magic link flow
Login Minimal
Clean minimal sign-in form
Login Email First
Email-first two-step authentication
Login Session Expired
Session timeout re-authentication
Login Account Locked
Locked account security screen
FAQ
Was this page helpful?
Sign in to leave feedback.
Floating Labels
Animated floating label React sign-in form for Next.js with labels that animate upward on focus, email and password inputs, remember me checkbox, and forgot password link using shadcn/ui, Tailwind CSS, and framer-motion
Full Viewport
Full viewport React login page for Next.js with centered floating card, CSS dot grid background pattern, social authentication buttons, email password form, and scale-in entrance animation using shadcn/ui, Tailwind CSS, and framer-motion