Horizontal Steps with Progress Line

Onboarding5: Horizontal Steps with Progress Line

Centered horizontal step tracker: numbered circles connected by a progress line, with the current and completed steps distinguished by border and fill color. The component has no internal state at all; every circle's completed/current status is derived fresh on each render from the currentStep number prop.

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

Base UI flavor

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

This installs the block to components/beste/block/onboarding5.tsx and the badge and button shadcn/ui primitives it depends on.

Quick start

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

import { Onboarding5, onboarding5Demo } from "@/components/beste/block/onboarding5";

export default function OnboardingPage() {
  return <Onboarding5 {...onboarding5Demo} />;
}

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

import { Onboarding5 } from "@/components/beste/block/onboarding5";

export default function OnboardingPage() {
  return (
    <Onboarding5
      badge={{ label: "Setup", variant: "secondary" }}
      heading="Complete your profile"
      description="Follow these steps to get started with your account."
      steps={[
        { id: "1", title: "Create account", description: "Sign up with your email" },
        { id: "2", title: "Verify email", description: "Check your inbox" },
        { id: "3", title: "Add details", description: "Tell us about yourself" },
      ]}
      currentStep={1}
      primaryButton={{ label: "Continue", href: "/setup/step-2" }}
      secondaryButton={{ label: "Skip for now", href: "/dashboard" }}
    />
  );
}

Props

type Step = {
  id: string;
  title: string;
  description?: string;
};

Behavior notes

• The component holds no internal state (there is no useState in the file): currentStep is a plain number prop, so completed/current styling, the connector line colors, and the mobile summary all re-derive directly from whatever value the parent passes. Nothing inside the block advances the step count.
• Step titles and descriptions are hidden per-circle on small screens (hidden sm:block); a single summary line below the whole track (block sm:hidden) shows steps[currentStep]'s title and description instead of squeezing every label under its circle.
• The track has a leading and trailing flex-1 spacer line so the row of circles stays visually centered regardless of how many steps are passed in.
• The connector segment between step i and i + 1 only turns bg-primary when i < currentStep; the segment leading into the current step stays the muted bg-border color.
• If steps is empty the component returns null rather than rendering an empty shell.
• Both buttons are plain links with no click handlers; nothing in this block itself changes currentStep, so pagination must be implemented by the page that renders it (e.g. by changing the prop on navigation).