caliper uidocs
DemoSign inGet Pro

Password reset

Pro

Forgot password and choose a new one: a cooldown on resend, wording that never reveals who has an account, and clear expired and saved states.

Installs components/ui/password-reset.tsxDepends on @radix-ui/react-slot, lucide-reactMotion shared motion tokens
pnpm dlx shadcn@latest add @caliper/password-reset
Caliper UI

Reset your password

Enter the email you sign in with and we will send you a link to choose a new password.

Remembered it?

Try limit@example.com for a rate limit.

When to use #

Use it for

  • People cannot remember their password.
  • The emailed link opens a page to set a new one.

Skip it when

  • The person is signed in and changing it; use security settings.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/password-reset

Adds its 12 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source. It is built from ForgotPasswordForm and ResetPasswordForm.

example.tsx
import { ForgotPasswordForm, ResetPasswordForm } from "@/components/ui/password-reset"

The worked example comes with Pro

The 66-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

ForgotPasswordForm

component
PropTypeDefaultDescription
titlestring"Reset your password"
descriptionstring"Enter the email you sign in with and we will send you a link to choose a new password."
defaultEmailstring""
expiresstring"30 minutes"How long the emailed link lasts, in words.
resendAfternumber30Seconds before "Resend email" can be pressed again.
onSubmit *(email: string) => AuthActionResult | Promise<AuthActionResult>—Send the reset email. Return `{ error }` for a message the person can act on, such as a rate limit.
back{ href?: string | undefined; onClick?: (() => void) | undefined; }—Where "Back to sign in" goes.
classNamestring—

ResetPasswordForm

component
PropTypeDefaultDescription
titlestring"Choose a new password"
emailstring—The account being reset, shown so people know which one they are changing.
minimumRulesnumber3How many password rules must be met.
expiredbooleanfalseStart in the expired state, when the token was already checked on the server.
onSubmit *(values: { password: string; signOutOthers: boolean; }) => ResetPasswordResult | Promise<ResetPasswordResult>—
onRequestNew(() => void)—Shown on the expired state: send a fresh link.
onContinue(() => void)—Shown once the password is saved.
continueLabelstring"Continue to sign in"
classNamestring—

Accessibility #

It exposes status and alert semantics, with aria-label and aria-invalid kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.