Shadcn Forgot Password Block Four
Block Four moves recovery into a card. The source adds a fixed diagonal gradient background, a blurred Card, and the softer instruction No worries, we'll send you reset instructions above the email field.
Recovery flow
The field and button are still the simple email reset pattern, but the card treatment gives the route more polish. It is a good fit when login and sign up pages already use cards and you want the forgot password form to match.
Layout notes
The @container wrapper and @sm:min-w-xs sizing keep the card compact while allowing a little more room on larger containers. Footer legal links sit outside the card so the recovery task remains primary.
What to wire before shipping
- Replace the placeholder action with your auth provider reset call.
- Confirm the blurred background meets contrast requirements.
- Keep reset instructions neutral and security-safe.
Frequently asked questions
Is this forgot password form production-ready?
It is a source-ready UI block, not a complete auth implementation. Add your reset request, validation, pending state, and confirmation copy in the application layer.
Can I use it with shadcn and Tailwind CSS?
Yes. The block uses React components, Tailwind CSS utilities, and shadcn-style form primitives such as Input, Label, Button, and in some variants Card.
What should the confirmation state say?
Keep it neutral, for example that reset instructions will be sent if an account exists for that email. That avoids leaking account existence while still helping the user continue.
Related Shadcn UI blocks
Start from Tailark
Build with Tailark
Production-ready marketing blocks, pages, and illustrations for Shadcn UI.