nessra uinessra ui

Reset Password

Previous: Forgot Password

A reset password page with new password and confirmation.

Loading...

Installation

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

Usage

This block is used after the user clicks the reset link in their email. Just import and render:

import { ResetPasswordForm } from "@/components/blocks/reset-password-form"
 
export default function ResetPasswordPage() {
  return <ResetPasswordForm />
}

Features

  • Full page layout with centered card
  • Logo with link to homepage
  • New password field with Lock icon and show/hide toggle
  • Confirm password field with Lock icon and show/hide toggle
  • Password match validation with Zod refine
  • TanStack Form for form state management
  • Submit button with spinner
  • Success state after password reset
  • Back to sign in link
  • Footer with copyright

Customization

  • Replace the logo with your own
  • Modify the validation schema in resetPasswordSchema
  • Get the reset token from URL params in onSubmit
  • Integrate with your password reset API
  • Change the links (/, /sign-in) to match your routing
Forgot Password

On this page

InstallationUsageFeaturesCustomization