Resetting password
The recovery flow that returns a locked-out user to a working password and back to logging in.
Onboarding & Auth · 6 checks · 11 resources
Before you ship
6- 01Place reset link close to password field — styled as a link to show it is clickable
- 02Ask for account details to verify — usually the email address, because it identifies the account and is the channel the link is sent to
- 03Show information has been sent — explain how they can continue, and send the email for the next step
- 04The message sent explains next steps — for example a link to a page that allows the user to reset their password
- 05Reset the password — behind the verification code or link, a clear text field to enter a new password
- 06Password successfully reset — indicate success and push their momentum back to their initial intent: logging in
Resources that help you build this
11- Chakra UI · 114 accessible React components with a token-driven styling system
- Untitled UI · Figma UI kit plus React Aria + Tailwind v4 component library with an MCP server
- UX Patterns for Devs · 92 UX patterns with accessibility rules, an MCP server and llms.txt
- Flowbite · 56+ MIT Tailwind components with vanilla-JS behaviour, plus a paid 450+ block library
- HextaUI · 103 shadcn registry items: primitives plus AI, auth, billing, settings and team blocks
- Opensource UI · 154 free MIT React and Next.js components across 26 categories, copy-pasted from pages that serve the full TypeScript source in the HTML
- Supabase UI Library · shadcn registry of blocks that wire a UI straight into Supabase auth, storage and realtime
- Watermelon UI · MIT shadcn registry: 131 animated components, 187 page blocks, 30 base primitives
- Page Flows · Screen recordings of real user flows from shipped iOS, Android, web, and email apps
- Preline UI · Free Tailwind library with 640+ examples, 204 blocks and documented plugin wiring
- Untitled UI on GitHub · The MIT source repos behind Untitled UI: components, icons, and 3 starter kits