Stepper

Installation

pnpm dlx shadcn@latest add @ffg/stepper

Usage

import { Stepper } from "@/components/ui/stepper";

<Stepper
  steps={[
    { label: "Funded", date: "Jun 1", progress: 100, state: "done" },
    { label: "Clearing", note: "In progress", progress: 50, state: "active" },
    { label: "Delivered", progress: 0, state: "pending" },
  ]}
/>

A data-driven progress track. Each step is a thin 2px bar above a label and an optional secondary line. Column count follows the number of steps, so 3/4/5+ tracks lay out evenly.

Each step takes a state:

• done — bar filled to progress, shows the date
• active — bar filled to progress and pulsing (the bar-pulse keyframe), shows the note
• pending — empty or partial bar, no secondary line

Dark mode: the bar track maps to the muted token and the fill uses the cerulean data-qual accent, so the track stays legible against either background. Labels and dates use foreground at reduced opacity.