Multi-Step Sign Up Wizard

Auth33: Multi-Step Sign Up Wizard

A full-height registration card that walks through an array of steps: a numbered progress stepper marks each step complete, active, or upcoming, and the active step renders its title plus a FieldGroup of labeled inputs, with a Back button (from step two onward) and a primary button that reads "Continue" until the final step, where it switches to "Create account".

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/auth33?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/auth33?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/auth33.tsx, plus the button, input, and field shadcn/ui primitives it uses for the step controls and the labeled form inputs.

Quick start

The installed file exports auth33Demo alongside the block: the exact props behind the preview above. Spread it to get a working sign-up wizard in one line.

import { Auth33, auth33Demo } from "@/components/beste/block/auth33";

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

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Auth33 } from "@/components/beste/block/auth33";

export default function Page() {
  return (
    <Auth33
      heading="Create your account"
      steps={[
        {
          label: "Account",
          title: "Your login details",
          fields: [
            { label: "Email", placeholder: "you@example.com", type: "email" },
            { label: "Password", placeholder: "Create a password", type: "password" },
          ],
        },
        {
          label: "Workspace",
          title: "Name your workspace",
          fields: [{ label: "Workspace name", placeholder: "acme", type: "text" }],
        },
      ]}
      labels={{ back: "Back", next: "Continue", submit: "Create account" }}
    />
  );
}

Props

type WizardField = {
  label: string;
  placeholder: string;
  type?: string;
};

type WizardStep = {
  label: string;
  title?: string;
  fields: WizardField[];
};

Behavior notes

• The active step index lives in an internal useState(0) that is never lifted out or exposed via props, so the parent cannot read or control which step is showing.
• Navigation is decorative only: handleNext and handleBack just move the internal index (clamped with Math.max(0, ...)), and the <form> calls e.preventDefault() on submit, so no field values are collected, validated, or emitted, wiring real submission is left to the integrator.
• Field inputs are uncontrolled with no value, onChange, or state, so their contents are lost when the user moves between steps.
• The Back button only renders when current > 0 AND labels.back is truthy; omitting labels.back removes it entirely even on later steps.
• The primary button label swaps at runtime: it shows labels.next until current >= steps.length - 1, then labels.submit on the final step; both fall back to undefined (blank) if those labels are unset.
• A step is marked complete (green check icon) when its index is below current, active when it equals current, and the connector line and number badge recolor accordingly; step labels are hidden below the sm breakpoint (hidden ... sm:inline).
• The stepper and card only render when steps.length > 0 and activeStep exists; each field's type defaults to "text" when unset.