Docs
Progress List

Progress List

Displays a list of items with progress indicators.

Open in
Step 1: Create account
Step 2: Verify email
Step 3: Complete profile
Step 4: Set preferences

Installation

Usage

import { ProgressList, ProgressItem } from "@/components/ui/progress-list";
<ProgressList>
  <ProgressItem title="Step 1: Create account" completed={true} />
  <ProgressItem title="Step 2: Verify email" completed={true} />
  <ProgressItem title="Step 3: Complete profile" completed={false} />
  <ProgressItem title="Step 4: Set preferences" completed={false} />
</ProgressList>

Props

ProgressList

PropTypeDefaultDescription
classNamestring-The class name to apply to the component.
childrenReactNode-The content to display in the component.

ProgressItem

PropTypeDefaultDescription
titlestring-The text to display for the progress item.
completedboolean-Whether the item has been completed.
PopoverProgress