Sign upPro

• Social sign-up
• Live password rules
• Email code step
• Welcome state

• Your product's sign-up page.

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

Import it from @/components/blocks/sign-up after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

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>
  );
}

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

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

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

• No dependencies beyond the password and code inputs.

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