Multi-Step Sign Up Wizard

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/auth/auth33.tsx instead.

Usage

The file also exports auth33Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Auth33, auth33Demo } from "@/components/blocks/auth/auth33";

export default function Page() {
  return <Auth33 {...auth33Demo} />;
}

Props

Behavior notes

• Real client state (`currentStep`) drives which of the three form bodies renders and which stepper circle is filled, active, or upcoming; the active circle gets `aria-current="step"`.
• Back is disabled on the first step; Continue advances currentStep on steps 1 and 2, and its label switches to finishLabel on the last step.
• Clicking Continue/Finish on the last step is intentionally left inert beyond the label change, actually creating the account is a backend action out of scope for this demo.
• The `steps` prop only relabels the stepper; the underlying field sets per step (email+password, name+avatar affordance, workspace name) are fixed and not data-driven.
• The avatar "Upload photo" button and photo circle are a visual affordance only, no real file picker is wired up.