Progress List

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

Account setup

Connect data source

Invite team members

Publish project

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

On This Page

Installation Usage