Circular Progress with Checklist

Onboarding12: Circular Progress with Checklist

Profile-completion screen built around a hand-drawn SVG progress ring, a completed/remaining stat pair, and a checklist card beneath it. Like the other checklist-style onboarding blocks, completion is entirely data-driven: there is no click handler to check off a task.

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

Base UI flavor

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

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

Quick start

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

import { Onboarding12, onboarding12Demo } from "@/components/beste/block/onboarding12";

export default function OnboardingPage() {
  return <Onboarding12 {...onboarding12Demo} />;
}

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

import { Onboarding12 } from "@/components/beste/block/onboarding12";

export default function OnboardingPage() {
  return (
    <Onboarding12
      badge={{ label: "Progress", variant: "secondary" }}
      heading="Complete your setup"
      description="Finish these tasks to unlock all features."
      tasks={[
        { id: "1", title: "Create your account", completed: true },
        { id: "2", title: "Verify email address", completed: true },
        { id: "3", title: "Connect payment method", completed: false },
        { id: "4", title: "Invite team members", completed: false },
      ]}
      labels={{ complete: "Complete", remaining: "remaining" }}
      buttons={[{ label: "Continue Setup", href: "/setup" }]}
    />
  );
}

Props

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

type ButtonConfig = {
  label: string;
  href: string;
  variant?: "default" | "secondary" | "outline" | "ghost";
};

Behavior notes

• Progress is entirely derived from tasks[].completed; there is no click handler to check off a task, so animating the ring means changing the tasks prop and letting the ring's own transition-all duration-500 animate the stroke change.
• The ring is a hand-built inline CircularProgress component: a muted background circle plus a primary-colored circle whose strokeDashoffset is computed from percentage, with the whole <svg> rotated -90 degrees so the arc starts at 12 o'clock instead of 3 o'clock.
• The completed/remaining stat pair sits directly below the ring, separated by a vertical h-12 w-px divider; both numbers are derived from the same tasks.filter((t) => t.completed) count used to draw the ring.
• Completed tasks get a strikethrough label; the task list uses divide-y on the <ul> for row separators rather than a border on each <li>.
• If tasks is empty the component returns null rather than rendering an empty shell.
• The percentage guards against division by zero (totalCount > 0 ? ... : 0), though in practice this path is unreachable in the rendered UI since an empty tasks array triggers the early null return first.