Progress Tracker

Component 13

About

An onboarding checklist card with an animated progress bar, where each step is a toggleable checkbox that draws its own checkmark and can auto-play through the remaining steps.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Progress Tracker to your project and fits it to your theme.

Code

How Progress Tracker is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ProgressTracker } from "@/components/ui/progress-tracker";

const steps = [
  { id: "tools", label: "Connect your imported tools" },
  { id: "notify", label: "Turn on notifications" },
  { id: "blockers", label: "Catch up on blockers" },
  { id: "priorities", label: "Summarize priorities" },
  { id: "project", label: "Create a project", done: true },
];

export default function ProgressTrackerDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-8 text-foreground">
      <ProgressTracker
        title="Getting started"
        steps={steps}
        onChange={(s) => console.log(s)}
      />
    </div>
  );
}