Primitive

Status Indicator Bar

Tiered status line with amount-based fill and labeled indicators.

All components Registry setup

Preview

components/ui/status-indicator-bar.tsx

Silver Tier: 2% Cashback

$1,800+ in balance to reach Gold: 3%

Tier Breakdown

Starter

Silver

Gold

Platinum

Diamond

Amount$7,000

$0$16,000

Starter Tier: 1% Cashback

$1,200+ in balance to reach Silver: 2%

Tier Breakdown

Starter

Silver

Gold

Platinum

Diamond

Platinum Tier: 4% Cashback

$2,400+ in balance to reach Diamond: 5%

Tier Breakdown

Starter

Silver

Gold

Platinum

Diamond

Install

pnpm dlx shadcn@latest add @rhythmic-ui/status-indicator-bar

Status Indicator Bar API

Pass labeled amount thresholds and a value; labels are spaced evenly while the fill interpolates within the active amount segment.

const tiers = [
  { label: "Starter", amount: 0 },
  { label: "Silver", amount: 5200 },
  { label: "Gold", amount: 8800 },
  { label: "Platinum", amount: 12400 },
  { label: "Diamond", amount: 16000 },
]

<StatusIndicatorBar
  title="Silver Tier: 2% Cashback"
  subtitle="$3,600+ in balance to reach Gold: 3%"
  actionLabel="Tier Breakdown"
  items={tiers}
  value={7000}
/>

Registry URL

Use through the configured namespace in consumer repos.

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