A two-column setup section: the pitch and what each answer changes on the left, and a one-question-at-a-time wizard on the right that ends in a review of everything it is about to create.
A two-column setup section. The left column explains what each answer changes, and the right column is a one-question-at-a-time wizard that replaces itself with a review of everything it is about to create.
Free block
This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.
Radix flavor
npx shadcn add "https://ui.beste.co/r/onboarding43"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/onboarding43"That installs the block file, the badge7 eyebrow and button12 pill it is built from, and the questionnaire primitive. The flow, the progress bar, and the review panel all live in the block file itself, so there is nothing else to wire up.
import { Onboarding43, onboarding43Demo } from "@/components/beste/block/onboarding43";
export default function Page() {
return <Onboarding43 {...onboarding43Demo} />;
}import { Onboarding43 } from "@/components/beste/block/onboarding43";
export default function Page() {
return (
<Onboarding43
badge={{ label: "Setup" }}
heading="Four questions, then your workspace is ready"
description="Every answer maps to a setting you can change later."
points={[
{
title: "One question at a time",
description: "The whole form is one field wide.",
},
{
title: "Answers become settings",
description: "Your role picks the home screen you land on.",
},
]}
note="Takes about a minute."
button={{ label: "See what each answer changes", href: "https://beste.co" }}
wizardHeading="Set up your workspace"
shortcuts="numbers"
labels={{ submit: "Create workspace" }}
summary={{ title: "Workspace ready", emptyLabel: "Skipped" }}
steps={[
{
name: "role",
title: "What do you do most days?",
required: true,
choices: [
{ value: "engineering", label: "Engineering", description: "Ship, review, and deploy." },
{ value: "design", label: "Design" },
],
},
{
name: "tools",
title: "What should we connect first?",
multiple: true,
choices: [
{ value: "github", label: "GitHub" },
{ value: "slack", label: "Slack" },
],
},
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | Badge | – | Parenthetical eyebrow above the heading, rendered with Badge7. |
heading | string | – | Section heading. |
description | string | – | Section description under the heading. |
points | SetupPoint[] | [] | Ruled three-up row under both columns. |
note | string | – | Muted line below the rule at the foot of the left column. |
button | ActionButton | – | Button12 pill under the note. |
wizardHeading | string | – | Heading above the wizard, in the right column. |
wizardDescription | string | – | Description under that heading. |
steps | WizardStep[] | [] | The questions, in the order they are asked. |
shortcuts | "letters" | "numbers" | – | Prints a shortcut on every choice of the active step. |
showProgress | boolean | true | The bar and the "Question n of m" line above the active step. |
labels | WizardLabels | {} | Overrides for the navigation and review buttons. |
summary | WizardSummary | {} | Copy for the panel that replaces the flow on submit. |
className | string | – | Merged onto the section element. |
type Badge = { label: string };
type ActionButton = { label: string; href: string };
type SetupPoint = { title: string; description: string };
type WizardStep = {
name: string;
title: string;
description?: string;
choices?: WizardChoice[];
input?: { label: string; placeholder?: string };
required?: boolean;
multiple?: boolean;
};
type WizardChoice = { value: string; label: string; description?: string };
type WizardLabels = {
previous?: string;
skip?: string;
next?: string;
submit?: string;
restart?: string;
};
type WizardSummary = {
title?: string;
description?: string;
emptyLabel?: string;
};required: true blocks Next and hides Skip until the step is answered. A step without it can be passed over, and the review panel prints summary.emptyLabel in its place.multiple: true renders checkboxes instead of radios, and a step with input renders a text field under the fixed choices that writes to the same field name.shortcuts prints a key on each choice and binds it while that step is active, so the same key means something else one question later.lg breakpoint and stack below it, with the wizard second in source order so it lands under the copy on a phone.onboarding14
Combined onboarding card for creating a workspace with name and URL slug, plus a team invite section with email inputs. Perfect for SaaS apps that require team collaboration setup.
onboarding33
A setup panel pairing a soft progress column, where an oversized percentage and accent bar react to what is ticked, with hairline checklist rows that each carry a description and a jump-in link.
onboarding37
A team setup section pairing a soft panel with a working invite row, a role picker, and a plain-language table of what each role can reach, with a bordered list of who is already on the account and whether they have accepted, closing on a seat meter that fills one tick per seat taken.
onboarding34
A getting-started section whose role pills swap a sticky summary column and the numbered steps beside it, each step carrying its own title, explanation, and honest time estimate.