Primitive

Progress Bar

Two-value balance bar with labeled amount rows.

Preview

components/ui/progress-bar.tsx

$58,240.50

Total Balance$15,093.00

Cash on Card$369.52

Total Balance$11,800.00

Cash on Card$4,200.00

Total Balance$8,400.00

Cash on Card$7,600.00

pnpm dlx shadcn@latest add @rhythmic-ui/progress-bar

Pass total balance and cash-on-card values; the bar renders both segments and matching legend rows.

<ProgressBar
  totalBalance={{ label: "Total Balance", amount: 15093 }}
  cashOnCard={{ label: "Cash on Card", amount: 369.52 }}
/>

Use through the configured namespace in consumer repos.

https://design.dev.rhythmic.io/r/progress-bar.json