Progress Bar

Installation

pnpm dlx shadcn@latest add @ffg/progress-bar

Usage

import { ProgressBar } from "@/components/ui/progress-bar";

<ProgressBar step={3} />

A segmented progress bar for the onboarding flow. step (1–6) fills every segment at or before the current step. The fill uses the qual cerulean accent; the track is foreground/15, so both adapt to dark mode.

Distinct from the shadcn Progress component, which is a continuous bar.