Multi-Step Form Wizard

Onboarding8: Multi-Step Form Wizard

Card wizard with a segmented progress bar and real Back/Next/Finish navigation driven by internal useState. Each step's content is caller-supplied JSX; the shipped demo fills it with shadcn Input, Select, and Checkbox fields for a personal-info, company-details, and preferences flow.

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/onboarding8?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/onboarding8.tsx and the badge and button shadcn/ui primitives it depends on.

Quick start

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

import { Onboarding8, onboarding8Demo } from "@/components/beste/block/onboarding8";

export default function OnboardingPage() {
  return <Onboarding8 {...onboarding8Demo} />;
}

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

import { Onboarding8 } from "@/components/beste/block/onboarding8";
import { Input } from "@/components/ui/input";

export default function OnboardingPage() {
  return (
    <Onboarding8
      badge={{ label: "Setup Wizard", variant: "secondary" }}
      heading="Create your account"
      description="Let's get you set up in just a few steps."
      steps={[
        {
          id: "1",
          title: "Personal Info",
          description: "Tell us about yourself",
          content: <Input type="email" placeholder="john@example.com" />,
        },
        {
          id: "2",
          title: "Preferences",
          description: "Customize your experience",
          content: <Input type="text" placeholder="Team name" />,
        },
      ]}
      labels={{ next: "Continue", back: "Back", finish: "Complete Setup", stepOf: "of" }}
    />
  );
}

Props

type FormStep = {
  id: string;
  title: string;
  description?: string;
  content: React.ReactNode;
};

Behavior notes

• currentStep only seeds useState(initialStep) at mount (destructured as currentStep: initialStep = 0); after that, navigation runs entirely through the internal handleNext/handleBack handlers, so changing the currentStep prop later does not move the wizard.
• The three demo steps render real shadcn Input, Select, and Checkbox elements, but none of them are wired to state or an onChange handler: they are presentational placeholders inside step.content, and nothing the user types or selects is ever read back by the component. Note also that .meta.ts's registryDependencies only lists badge and button, not select/checkbox/input, even though the demo content renders all three.
• Clicking "Finish" on the last step only calls console.log("Setup completed!"); there is no onFinish/onComplete callback prop, so consumers can't hook into wizard completion without editing the component.
• The step indicator is a row of equal-width segments (one per step) rather than numbered circles; a segment turns bg-primary once index <= currentStep, so the current step's segment is already fully colored, not partially filled.
• The Back button is omitted entirely (not shown disabled) on the first step, and the Next/Finish button expands to w-full when Back is hidden.
• If steps is empty the component returns null rather than rendering an empty card.