Nothing here is permanent. Every answer maps to a setting you can change later, and skipping one just leaves the default in place.
Set up your workspace
Press a number key to answer without reaching for the mouse.
One question at a time
The whole form is one field wide, so there is never a screen of empty inputs waiting for you.
Answers become settings
Your role picks the home screen, the tools you choose are the first integrations we connect.
Nothing is locked in
The summary at the end lists what we are about to create, and every line of it stays editable.
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.
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.
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.
onboarding44
A setup checklist with a sticky left column: serif headline that settles in word by word, an intro, a large done count over a hairline progress bar that grows as steps are ticked, and a sliding-marker pill. On the right a ruled list of steps, each with a round check button, a serif title that strikes through when done, a description and an optional link.