Stacked Bar

Single horizontal bar divided into tinted segments by percentage, with a legend row below.

Storage breakdown
  • Media53%
  • Docs23%
  • Cache15%
  • Other10%

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

Import & use
import { Progress6 } from "@/components/beste/piece/progress6";

<Progress6
  title="Storage breakdown"
  segments={[
    {
      "label": "Media",
      "value": 42,
      "tone": "emerald"
    },
    {
      "label": "Docs",
      "value": 18,
      "tone": "sky"
    },
    {
      "label": "Cache",
      "value": 12,
      "tone": "amber"
    },
    {
      "label": "Other",
      "value": 8,
      "tone": "muted"
    }
  ]}
/>