Forgot Password

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/forgot-password-form.json

Usage

This block is a complete forgot password page ready to use. Just import and render:

Copyimport { ForgotPasswordForm } from "@/components/blocks/forgot-password-form"
 
export default function ForgotPasswordPage() {
  return <ForgotPasswordForm />
}

Features

• Full page layout with centered card
• Logo with link to homepage
• Email field with Mail icon
• Zod validation
• TanStack Form for form state management
• Submit button with spinner
• Success state after submission with confirmation message
• Back to sign in link
• Footer with copyright

Customization

• Replace the logo with your own
• Modify the validation schema in forgotPasswordSchema
• Integrate with your password reset API in onSubmit
• Customize the success message
• Change the links (/, /sign-in) to match your routing