Pick the job closest to yours and we will show you the three things worth doing before anything else.
You care about capacity and money. These three make both visible before you invite anyone else in.
A CSV is enough. Names, contact details, and any reference numbers you already use come across as they are.
Rooms are the thing capacity is measured against, so this is the step that makes every later number mean something.
Point it at your existing URL and the links you have already printed keep working.
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.
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.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
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/onboarding34?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/onboarding34?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/onboarding34.tsx plus the badge23 and button21 components it uses for the eyebrow and the per-role action.
The installed file exports onboarding34Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.
import { Onboarding34, onboarding34Demo } from "@/components/beste/block/onboarding34";
export default function GettingStartedPage() {
return <Onboarding34 {...onboarding34Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Onboarding34 } from "@/components/beste/block/onboarding34";
export default function GettingStartedPage() {
return (
<Onboarding34
badge={{ label: "Start here" }}
heading="Your first hour depends on what you do all day"
description="Pick the job closest to yours."
roles={[
{
label: "Practice manager",
title: "Get the week on the screen",
description: "You care about capacity and money.",
steps: [
{
title: "Import your member list",
description: "A CSV is enough. Names, contact details, and reference numbers.",
duration: "10 minutes",
},
{
title: "Set your rooms and opening hours",
description: "Rooms are the thing capacity is measured against.",
duration: "15 minutes",
},
],
button: { label: "Open the manager checklist", href: "/start/manager" },
},
{
label: "Reception",
title: "Get the day running",
description: "You care about the list in front of you and the phone.",
steps: [
{
title: "Learn the clinic list",
description: "Everyone arriving today in one column, sorted by time.",
duration: "5 minutes",
},
],
button: { label: "Open the reception checklist", href: "/start/reception" },
},
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Eyebrow above the hairline rule, rendered through Badge23 |
heading | string | – | Section heading in the left column of the header |
description | string | – | Supporting paragraph, right-aligned from md up |
roles | Role[] | [] | Selectable roles, the first one starts active |
className | string | – | Extra classes for the outer section |
type ActionLink = {
label: string;
href: string;
};
type Step = {
title: string;
description: string;
duration: string;
};
type Role = {
label: string;
title: string;
description: string;
steps: Step[];
button: ActionLink;
};String(index + 1).padStart(2, "0") renumbers automatically per role, so every role starts at 01.`${active.label}-${index}`, so React remounts the rows when the role changes rather than reusing them.duration is required on every step. The block is built around publishing an honest time estimate next to each instruction, so a step cannot quietly omit it.lg:sticky lg:top-24 lg:self-start. The self-start is required, otherwise the column stretches to the row height and sticky has nothing to travel within.1fr to 2fr split, giving the steps twice the width of the summary.button elements with aria-pressed and explicit cursor-pointer, since Tailwind v4 buttons default to cursor: default.onboarding31
A getting-started section with an eyebrow over a hairline rule, a two-column heading, three monospace-numbered steps under their own hairlines, and an accent button.
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.
onboarding17
Onboarding screen where users pick their primary goal to receive a tailored onboarding path. Each goal card shows a recommended feature set. Perfect for multi-purpose platforms.
onboarding20
Onboarding screen with a grid of starter templates to choose from, each with a preview thumbnail, title, and description. Perfect for project creation flows in design tools and project management apps.