Interactive Setup Checklist

Onboarding33: Interactive Setup Checklist

Setup panel pairing a soft progress column, where an oversized percentage and an accent bar react to whatever is ticked, with checklist rows separated by hairlines, each carrying a description and a link straight into the screen that finishes the step.

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/onboarding33?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/onboarding33?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/onboarding33.tsx plus the badge23 component it uses for the eyebrow.

Quick start

The installed file exports onboarding33Demo alongside the block: the exact props behind the preview above. Spread it to get a working checklist in one line.

import { Onboarding33, onboarding33Demo } from "@/components/beste/block/onboarding33";

export default function SetupPage() {
  return <Onboarding33 {...onboarding33Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Onboarding33 } from "@/components/beste/block/onboarding33";

export default function SetupPage() {
  return (
    <Onboarding33
      badge={{ label: "Setup" }}
      heading="Six things, then you are live"
      description="Work through them in any order."
      progress={{
        label: "of setup complete",
        note: "Most teams finish the list inside a working week.",
      }}
      items={[
        {
          title: "Add your services",
          description: "Names, durations, and prices become the bookable slots.",
          link: { label: "Open services", href: "/settings/services" },
          done: true,
        },
        {
          title: "Invite the team",
          description: "Front desk, clinicians, and finance, each with scoped access.",
          link: { label: "Invite people", href: "/settings/team" },
        },
      ]}
    />
  );
}

Props

type ActionLink = { label: string; href: string };

type Step = {
  title: string;
  description: string;
  link: ActionLink;
  done?: boolean;
};

Behavior notes

• Ticked state is a record keyed by row index, and an untouched key falls back to the step's own done, so the panel opens on the state you pass and every click after that is local.
• The percentage is derived on each render from how many rows count as done over the total, and the bar's width is that same number, so the figure and the bar can never disagree.
• The bar is a plain div with an inline width percentage rather than a progress component, which keeps this block free of an extra dependency for one measure.
• A ticked row strikes its title through and drops it to muted while the description stays put, so the list still reads as a plan rather than as crossed-out noise.
• Only the circle is a button. The step's link sits outside it, so ticking a step and going to do it are two separate targets and neither swallows the other.
• Nothing persists: there is no onToggle prop, so the ticks live for the life of the component and the real completion state belongs to your backend.
• Rows lose the rule on the last one and drop their outer padding at both ends, so the list sits inside the panel's padding instead of drawing a line against it.