Three Step Getting Started

Onboarding31: Three Step Getting Started

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.

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/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.

Quick start

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" }}
    />
  );
}

Props

type Badge = { label: string };
type ActionLink = { label: string; href: string };
type Step = { title: string; description: string };

Behavior notes

• No internal React state at all: 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.
• Step numbers are computed from the array index (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.
• The heading and description sit in a two-column grid below the badge and hairline rule; the description column right-aligns on desktop (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.