Sign up form

An account creation flow with field validation, password strength, and a clear completion state.

$npx shadcn@latest add @silicon-ui/signup-form

Installation

$npx shadcn@latest add @silicon-ui/signup-form

Install the dependencies.
$npm install @radix-ui/react-checkbox motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/blocks/signup-form/signup-form.tsx
- components/silicon-ui/blocks/signup-form/signup-form.module.css
- components/silicon-ui/password-field/password-field.tsx shared
- components/silicon-ui/password-field/password-field.module.css shared
- components/silicon-ui/input/input.tsx shared
- components/silicon-ui/input/input.module.css shared
- components/silicon-ui/checkbox/checkbox.tsx shared
- components/silicon-ui/checkbox/checkbox.module.css shared
- components/silicon-ui/button/button.tsx shared
- components/silicon-ui/button/button.module.css shared
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { SignupForm } from "@/components/silicon-ui/blocks/signup-form/signup-form";

Prop	Type	Default
`onSubmit` Receives the details once every field is valid. Throw to show a submit error.	`(details: SignupDetails) => void \| Promise<void>`	—
`serverError` An error from your API, shown above the submit button.	`string \| null`	—
`onProvider` Called when someone picks a single sign-on provider. The preview simulates the redirect.	`(provider: Provider) => void`	—