Tracked Setup SequencePRO

Onboarding35: Tracked Setup Sequence

A setup section listing four numbered steps with who owns each one, against a column that sticks while they scroll and floats a live step tracker on an image tile.

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

Base UI flavor

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

This installs the block to components/beste/block/onboarding35.tsx, the progress16 tracker piece it floats on the tile (installed to components/beste/piece/progress16.tsx), and the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

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

import { Onboarding35, onboarding35Demo } from "@/components/beste/block/onboarding35";

export default function SetupPage() {
  return <Onboarding35 {...onboarding35Demo} />;
}

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

import { Onboarding35 } from "@/components/beste/block/onboarding35";
import { Progress16 } from "@/components/beste/piece/progress16";

export default function SetupPage() {
  return (
    <Onboarding35
      badge={{ label: "The sequence" }}
      heading="Four steps, and you can see which one you are on"
      description="Setup is tracked in the product rather than in somebody's inbox."
      steps={[
        {
          title: "Send us what you have",
          description: "Any export from your current system, in whatever shape it comes out.",
          owner: "You, about ten minutes",
        },
        {
          title: "Map it together",
          description: "One hour agreeing what each old field becomes.",
          owner: "One hour, both of us",
        },
      ]}
      media={
        <Progress16
          title="Your setup"
          steps={["Export", "Map fields", "Review", "Go live"]}
          activeIndex={1}
          caption="Mapping is booked for Thursday."
        />
      }
      image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
      mediaCaption="The same tracker your team sees."
      button={{ label: "Start step one", href: "/setup" }}
    />
  );
}

Props

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

type Step = {
  title: string;
  description: string;
  owner: string;
};

Behavior notes

• Step numbers are computed, not authored: String(index + 1).padStart(2, "0") renumbers automatically when steps are reordered or one is inserted.
• owner is required on every step and is written as a combined actor and duration, for example "You, about ten minutes". That single string is what makes the sequence read as a commitment rather than an instruction list.
• The tile column is 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. Adjust top-24 to match your own fixed header.
• The tracker's activeIndex is passed to the piece as fixed copy. This block holds no setup state, so wiring the tracker to real progress means lifting that value out.
• The step list and the tracker are independent: the tracker's steps array is its own, so keeping the two in step is authoring work.
• The number column is a fixed 3rem grid track from sm up. Below sm the grid collapses and the number stacks above the title.
• Steps carry border-t with no closing rule, so the list flows into the action below it.