Segmented Progress

Row of N equal chunks with the first K filled in the chosen tone. Trailing fraction count.

Onboarding4 / 6

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Progress5 } from "@/components/beste/piece/progress5";

<Progress5
  segments={6}
  filled={4}
  tone="emerald"
  label="Onboarding"
/>