No implementation project, no month of meetings. You could have your first booking on Sirius by the end of the afternoon.
Import members, appointments, and open invoices from a spreadsheet or a direct export in a few clicks.
Set roles, connect billing, and turn on the parts of the workflow that match how your practice actually runs.
Invite the team, publish your booking page, and let the reminders and invoices start running on their own.
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.
Static getting-started section with an eyebrow badge over a hairline rule, a two-column heading and description row, three monospace-numbered steps under their own hairlines, and a single accent CTA button. Purely presentational: no internal state, no step gating.
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/onboarding31?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/onboarding31?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/onboarding31.tsx, the badge23 and button21 components it renders (the eyebrow pill above the hairline rule and the accent CTA button), and its dependencies.
The installed file exports onboarding31Demo alongside the block: the exact props behind the preview above. Spread it to get a working getting-started section in one line.
import { Onboarding31, onboarding31Demo } from "@/components/beste/block/onboarding31";
export default function OnboardingPage() {
return <Onboarding31 {...onboarding31Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Onboarding31 } from "@/components/beste/block/onboarding31";
export default function OnboardingPage() {
return (
<Onboarding31
badge={{ label: "Getting started" }}
heading="Live in three unhurried steps"
description="No implementation project, no month of meetings."
steps={[
{
title: "Bring your data across",
description: "Import members, appointments, and open invoices in a few clicks.",
},
{
title: "Shape it around your team",
description: "Set roles, connect billing, and turn on the parts you need.",
},
{
title: "Open the doors",
description: "Invite the team and publish your booking page.",
},
]}
button={{ label: "Start your setup", href: "https://beste.co" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | Badge | – | Eyebrow pill rendered above the hairline rule |
heading | string | – | Left column headline |
description | string | – | Right-aligned (on desktop) supporting copy |
steps | Step[] | [] | Ordered, numbered step cards |
button | ActionLink | – | Single CTA rendered below the steps |
className | string | – | Extra classes for the outer <section> |
type Badge = { label: string };
type ActionLink = { label: string; href: string };
type Step = { title: string; description: string };steps, badge, and button render directly from props, so there's no wizard progression, no step gating, and no per-step interactivity, this is a static "how it works" section rather than a live onboarding flow.String(index + 1).padStart(2, "0")) rather than any id/step field on each item, so reordering the steps array automatically renumbers the printed "01", "02", "03" labels.md:justify-end) while the heading stays left-aligned, splitting the row into a wide headline and a shorter blurb.Button21 is composed with asChild and an empty <Link href={button.href} /> (no children on the Link); the button's visible label comes from Button21's own label prop, not from anything rendered inside the link.