# Sign up

> Three-step sign-up: account, password with live rules and email code verification.

Block · Pro · https://lodeui.com/blocks/sign-up

## When to use

- Your product's sign-up page.

## When not to use

- Sign-in: use the sign-in block.

## Installation

```bash
npx shadcn@latest add @lode/sign-up
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { SignUp } from "@/components/blocks/sign-up";

export default function Page() {
  return (
    <main className="grid min-h-dvh place-items-center p-6">
      <SignUp />
    </main>
  );
}
```

Built from: OTP input, Password strength

## API reference

### SignUp

Sign up in three steps: name and email (or Google / GitHub), a password with live rules and terms, then a 6-digit email code. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter | Continue |
| 0–9 | Type the code |
| ⌘V / Ctrl+V | Paste the code |

## Accessibility

- Every field is labelled with autocomplete; errors use role="alert"; the welcome state is a status message.

## Motion

- Steps slide; the progress dashes fill; the welcome check spins in.

## Responsive behavior

- Up to 384px wide; fits at 320px.

## Performance

- No dependencies beyond the password and code inputs.

## Notes for AI

- Wire steps to your auth: create the user at step 2 and verify the code at step 3. Demo code: 123456.

## Related

- [Sign in](https://lodeui.com/blocks/sign-in) — Password or magic link, SSO and GitHub, inline validation and a check-your-email state.
- [Two-factor verification](https://lodeui.com/blocks/two-factor) — Authenticator code with resend timer, backup-code fallback and success state.
- [Password strength](https://lodeui.com/components/password-strength) — New-password field with show / hide, a four-step meter and a live rules checklist.
- [Forgot password](https://lodeui.com/blocks/forgot-password) — Password reset: request link, resend timer, new password and done state.