All components
Stacked Progress
Data DisplayA stacked bar whose coloured segments grow in one after another.
DesignBuildQA
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/stacked-progress.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge2. Copy the component source into
components/library/stacked-progress.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| segments | { label: string; value: number; color: string }[] | - | Segments to stack, in order. |
Accessibility
- Every segment has a labelled legend swatch, so colour is not the only cue.
- Widths are computed from the total, so values need not sum to 100.
- Legend wraps rather than overflowing on narrow screens.
Dependencies
motionclsxtailwind-merge