Other

MeterGroup

Stacked meter showing how multiple values share one total, with an automatic color palette and an optional legend with percentages.

Import

import { MeterGroup } from "@zephora/react";

Examples

Basic

Without `max`, the scale defaults to the sum of all item values.

Apps46
Photos32
System22

<MeterGroup
  items={[
    { label: "Apps", value: 46 },
    { label: "Photos", value: 32 },
    { label: "System", value: 22 },
  ]}
/>

Fixed max and percentages

With `max` the bar can be partially filled; `showLabels` adds percentages to the legend.

Used210 (41%)
Cache96 (19%)

<MeterGroup
  max={512}
  showLabels
  items={[
    { label: "Used", value: 210 },
    { label: "Cache", value: 96 },
  ]}
/>

Custom colors and sizes

Passed180
Skipped24
Failed6

<MeterGroup
  size="lg"
  items={[
    { label: "Passed", value: 180, color: "#16a34a" },
    { label: "Skipped", value: 24, color: "#f59e0b" },
    { label: "Failed", value: 6, color: "#dc2626" },
  ]}
/>

API

MeterGroup props

Prop	Type	Default	Description
`items` *	`Array<{ label: string; value: number; color?: string }>`	—	Segments to stack. Colors default to the built-in palette.
`max`	`number`	—	Scale total. Defaults to the sum of all item values.
`showLegend`	`boolean`	`true`	Renders the legend under the bar.
`showLabels`	`boolean`	`false`	Renders each item's percent inside the legend.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Track thickness.
`orientation`	`"horizontal"`	`"horizontal"`	Layout of the bar. Only horizontal is supported.
`aria-label`	`string`	`"Meter group"`	Accessible name of the group.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.