Progress List

Component

About

A vertical list of step items that shows completed, actively-in-progress (spinning), and pending states for things like setup wizards or onboarding checklists.

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

Code

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

Usage.tsx

import { ProgressItem, ProgressList } from "@/components/ui/progress-list";

export default function ProgressListDemo() {
  return (
    <ProgressList>
      <ProgressItem completed title="Account setup" />
      <ProgressItem completed title="Connect data source" />
      <ProgressItem state="current" title="Invite team members" />
      <ProgressItem completed={false} title="Publish project" />
    </ProgressList>
  );
}