Sign up, split

The form with a password strength meter and terms beside a soft blue panel: what you get, the product in miniature, a customer's words.

$ pnpm dlx shadcn@latest add @dashral/sign-up-split

When to use

The sign-up form with a password meter and terms, beside a panel of what you get.
Registration pages that sell while people type.

When not to use

Sign-ups that are just an email: Sign-up hero or CTA with sign-up.
Invitations to an existing team: the invite already knows the email; a shorter form.

Usage

example.tsx

1import { SignUpSplit } from "@/components/dashral/blocks/sign-up-split"
2
3<SignUpSplit
4  onSubmit={async (account) => {
5    await api.auth.register(account)
6  }}
7  termsHref="/terms"
8  privacyHref="/privacy"
9  signInHref="/login"
10/>

API reference

SignUpSplit

Prop	Type	Default
`title`	`React.ReactNode`	`"Create your account"`
`description`	`React.ReactNode`	`sample`
`onSubmit`	`(values: SignUpValues) => Promise<void> \| void` Your sign-up, once every rule is met and the terms agreed to. Resolve to show `done`; throw an Error to show its message above the button. Without it, the form plays a sample.	—
`done`	`React.ReactNode` What it says once the account is made.	`sample`
`rules`	`PasswordRule[]` The password's rules: one meter segment fills per rule met.	`sample`
`termsHref`	`string` Where the terms, the privacy policy and "Sign in" go; no signInHref hides the line.	`"#"`
`privacyHref`	`string`	`"#"`
`signInHref`	`string`	`"#"`
`panel`	`{ points?: string[] preview?: { label: string; value: string; change: string; series: number[]; note?: React.ReactNode } \| null testimonials?: Testimonial[] } \| null` The brand panel beside the form (hidden on phones): what you get, the product in miniature, customers' words; null hides it.	`{}`

type PasswordRule

Prop	Type	Default
`label`	`string`	—
`test`	`(value: string) => boolean`	—

type Testimonial

Prop	Type	Default
`quote`	`string`	—
`name`	`string`	—
`role`	`string`	—
`src`	`string`	—

type SignUpValues

Prop	Type	Default
`firstName`	`string`	—
`lastName`	`string`	—
`email`	`string`	—
`password`	`string`	—