Progress Bar with Task Checklist

Onboarding7: Progress Bar with Task Checklist

Card-based setup tracker: a shadcn Progress bar and large percentage readout sit above a checklist of tasks, each carrying its own completed flag. Progress is entirely data-driven; there is no click handler anywhere in the component to check a task off.

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

Base UI flavor

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

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

Quick start

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

import { Onboarding7, onboarding7Demo } from "@/components/beste/block/onboarding7";

export default function OnboardingPage() {
  return <Onboarding7 {...onboarding7Demo} />;
}

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

import { Onboarding7 } from "@/components/beste/block/onboarding7";

export default function OnboardingPage() {
  return (
    <Onboarding7
      badge={{ label: "Progress", variant: "secondary" }}
      heading="You're almost there!"
      description="Complete these tasks to finish setting up your account."
      tasks={[
        { id: "1", title: "Create your account", completed: true },
        { id: "2", title: "Verify your email", completed: true },
        { id: "3", title: "Connect your calendar", completed: false },
      ]}
      progressLabel="Setup Progress"
      primaryButton={{ label: "Continue", href: "/setup" }}
      secondaryButton={{ label: "Finish later", href: "/dashboard" }}
    />
  );
}

Props

type Task = {
  id: string;
  title: string;
  completed: boolean;
};

Behavior notes

• Completion is entirely data-driven: each task carries its own completed: boolean, there is no click handler to toggle a task, and no internal state in the component. Changing progress means changing the tasks prop from the outside.
• The percentage is computed as Math.round((completedCount / totalCount) * 100) and drives both the shadcn Progress bar's value and a large centered {percentage}% label beneath it.
• Completed tasks get a strikethrough label and a tinted border-primary/20 bg-primary/5 row; unfinished tasks keep the plain card border and background.
• The checkmark inside a completed task's indicator is a hand-drawn inline <svg> path (M5 13l4 4L19 7), not a lucide-react Check icon like the rest of this block family uses.
• If tasks is empty the component returns null rather than rendering an empty card.
• primaryButton and secondaryButton are both sm:flex-1, so on wider screens they split the row evenly instead of sizing to their text.