Set New Password

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/auth/auth5.tsx instead.

Usage

The file also exports auth5Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Auth5, auth5Demo } from "@/components/blocks/auth/auth5";

export default function Page() {
  return <Auth5 {...auth5Demo} />;
}

Props

Behavior notes

• The requirements checklist is genuine derived validation: it reads the real controlled value of the new-password input and re-evaluates length/uppercase/number checks on every keystroke, it is not a decorative static list.
• The two show/hide toggles are independent real client-side state, toggling the new-password field does not affect the confirm-password field and vice versa.
• The fixed requirement rules (length, uppercase, number) live inside the component rather than as a prop, since passing functions as props into a client component across the block-preview's server/client boundary is not supported in this codebase; the requirements are not currently configurable from outside the file.
• Confirm password is not compared against the new password, there is no matching check, and the form submit does not actually reset anything.