Enter the email linked to your account and we'll send you a link to reset your password.
Full-height password recovery screen with a centered icon, single email field built on the shadcn Field primitives, a send-reset-link button, and a back-to-sign-in link. Perfect for the first step of any password reset flow.
Full-height password recovery screen: a centered icon badge, heading and description, a single email field built on the shadcn Field primitives, a send-reset-link button, and a back-to-sign-in link underneath the card.
Free block
This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.
Radix flavor
npx shadcn add "https://ui.beste.co/r/auth4"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/auth4"This installs the block to components/beste/block/auth4.tsx and the button, input, and field shadcn/ui primitives it's built on.
The installed file exports auth4Demo alongside the block: the exact props behind the preview above. Spread it to get a working recovery screen in one line.
import { Auth4, auth4Demo } from "@/components/beste/block/auth4";
export default function ForgotPasswordPage() {
return <Auth4 {...auth4Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { KeyRound } from "lucide-react";
import { Auth4 } from "@/components/beste/block/auth4";
export default function ForgotPasswordPage() {
return (
<Auth4
icon={<KeyRound className="size-6" />}
heading="Forgot your password?"
description="Enter the email linked to your account and we'll send you a reset link."
backLink={{ label: "Back to sign in", href: "/sign-in" }}
labels={{ email: "Email", emailPlaceholder: "[email protected]", submit: "Send reset link" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
icon | React.ReactNode | – | Icon shown inside the circular badge above the heading |
heading | string | – | Screen title |
description | string | – | Subtext below the heading |
backLink | { label: string; href: string } | – | Link below the card, hidden entirely when not set |
labels | { email?: string; emailPlaceholder?: string; submit?: string } | {} | Field label, placeholder, and submit button copy |
className | string | – | Extra classes for the outer <section> |
<form> only calls e.preventDefault() on submit; there is no onSubmit prop, no controlled input state, and no network call, so the integrator has to add their own handler and read the input value themselves (there's no useState on the email field at all).Field's label is conditionally rendered on labels.email being set, and the submit Button is conditionally rendered on labels.submit being set; both default to hidden if their label is omitted.Auth5-style screens for the actual reset.Wiring the form up
This block ships the form markup only; state, validation, and submit are yours to add. Our guide wires the shadcn Field primitives to React Hook Form, TanStack Form, and Formisch on one field system.