GitHub

Progress List

PreviousNext

Show completed, active (spinning), and pending steps in a vertical list.

Loading
Loading...
import {
  ProgressItem,
  ProgressList,
} from "@/components/ui/progress-list";
 
export 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>
  );
}

Installation

npx shadcn@latest add "https://ui.blode.co/r/styles/default/progress-list"

Usage

import { ProgressItem, ProgressList } from "@/components/ui/progress-list";
<ProgressList>
  <ProgressItem completed title="Account setup" />
  <ProgressItem state="current" title="Invite team members" />
  <ProgressItem completed={false} title="Publish project" />
</ProgressList>