161
A two-panel sign-up: the form validates as you go (live email check, password rules that tick off, a strength bar) beside a product glimpse and rotating customer quotes that fold below on phones.
akasign up·register·create account
Run this in any project set up for the shadcn CLI. It copies the Split Sign-up source into your components folder, so the code is yours to change.
npx shadcn@latest add https://devl.dev/r/split-sign-up.jsonImport it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.
import { SplitSignUp } from "@/components/split-sign-up";
export default function Page() {
return <SplitSignUp />;
}A free React block in the Auth collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.
Read from the Split Sign-up source. Everything is optional unless it says required.
| Prop | Type | Default |
|---|---|---|
| product | string | "Tidewell" |
| title | string | "Create your account" |
| subtitle | string | "Start a 14-day trial. No card needed." |
| quotes | SignUpQuote[] | [] |
| showcase | ReactNode | — |
| checkEmail | (email: string) => Promise<boolean> | — |
| onSubmit | (values: SignUpValues) => Promise<void> | async () => {} |
| onSignIn | () => void | — |
| className | string | — |