Progress Tracker

Component

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";

function DotIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
      <circle cx="12" cy="12" r="8" />
    </svg>
  );
}

function SquareIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
      <rect x="5" y="5" width="14" height="14" rx="3" />
    </svg>
  );
}

const steps = [
  { id: "updates", label: "Catch up on blockers", icon: <DotIcon /> },
  { id: "notes", label: "Summarize priorities", icon: <SquareIcon /> },
  { id: "project", label: "Create a project" },
];

export default function ProgressTrackerIconsDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-8 text-foreground">
      <ProgressTracker title="Set up your workspace" steps={steps} />
    </div>
  );
}