Meter Group

FreeNew

One bar split into labelled parts against a total, with a legend that carries the numbers, for storage, budgets and quotas.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

max1

unit

label

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac/meter-group

Usage

import { MeterGroup } from "@/components/ui/meter-group"

<MeterGroup
  label="Storage used"
  unit=" GB"
  max={100}
  items={[
    { label: "Photos", value: 41 },
    { label: "Documents", value: 18 },
  ]}
/>

Props

Prop	Type	Default	Description
`items`	`{ label, value, className? }[]`	`-`	The parts.
`max`	`number`	`sum`	The total the bar represents.
`unit`	`string`	`""`	Appended to legend values.
`label`	`string`	`-`	Names the whole bar.