Setup Checklist

Onboarding44: Setup Checklist

A checklist that keeps score: round checks you can tick, a count over a hairline that grows as you go, and a line that only appears once every step is done.

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

Base UI flavor

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

This installs the block to components/beste/block/onboarding44.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

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

import { Onboarding44, onboarding44Demo } from "@/components/beste/block/onboarding44";

export default function Page() {
  return <Onboarding44 {...onboarding44Demo} />;
}

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

import { Onboarding44 } from "@/components/beste/block/onboarding44";

export default function Page() {
  return (
    <Onboarding44
      eyebrow="Getting started"
      heading="Six small steps to a finished site."
      description="Tick them off in any order."
      progressLabel="of 6 done"
      completeLabel="All set. Your site is ready to publish."
      buttons={[{ label: "Open the editor", href: "/editor" }]}
      steps={[
        { title: "Name the project", description: "Pick a working title.", done: true },
        { title: "Add a homepage", description: "A hero, a few features and a footer.", link: { label: "Draft it now", href: "/draft" } },
      ]}
    />
  );
}

Props

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

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• Ticked state is held in component state seeded from each step's done flag, so the block is interactive out of the box but forgets everything on reload. Lift the state out if you need it to persist.
• Checks are buttons with role="checkbox" and aria-checked rather than real inputs, which keeps them keyboard operable without a form around them.
• The progress bar is a scaleX transform on a hairline, so it animates smoothly between any two counts rather than stepping.
• The count sits in an aria-live region, so a screen reader hears the new total after each tick without being told about the bar.
• A step's link is hidden once it is ticked, since an action you have already taken is noise in a list you are working down.
• Titles strike through with a one-pixel decoration and drop to the muted colour when done, which reads as complete without removing the row.
• The left column is sticky from the large breakpoint up so the score stays visible while you work down a long list.