Free
Pro

Meter Group

A stacked meter that shows multiple values as proportional segments of one bar. Pass an array of { label, value, color?, icon? } items. Segment widths are relative to the sum of values, or to an optional max total.

free

Basic

Default meter with a color legend (values and percentages).

  • Apps16 (27.6%)
  • Messages8 (13.8%)
  • Media24 (41.4%)
  • System10 (17.2%)

HTML


TypeScript

With icons

Set icon on each item to show a base-icon in the legend (colored with stroke-*).

  • Users40 (40%)
  • Servers25 (25%)
  • Database20 (20%)
  • Storage15 (15%)

HTML


TypeScript

Sizes

Use size — sm, md (default), lg, or xl.

sm

md

lg

xl


HTML

Max total

Pass [max] when segments should fill only part of a known capacity (e.g. 72 of 100 GB used). Unused space stays as the track background.

Storage used: 72 / 100 GB

  • Documents18 (18%)
  • Photos32 (32%)
  • Videos22 (22%)

HTML


TypeScript

Legend options

Toggle showLegend, showValue, and showPercent.

  • Apps (27.6%)
  • Messages (13.8%)
  • Media (41.4%)
  • System (17.2%)

HTML

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add meter-group

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add meter-group
// Paths are relative to aliases.components (default: src/app/components)
import { MeterGroupComponent } from './meter-group/meter-group.component';

@Component({
  selector: 'app-your-component',
  imports: [
    MeterGroupComponent
  ],
  template: `...`
})
export class YourComponent {}

API for meter-group — generated from JSDoc in the library source.

API reference for meter-group
APIMemberTypeDefaultDescription
base-meter-groupvalueMeterGroupItem[][]Segments to render. Widths are proportional to each item's `value` relative to `max` (or the sum of values when `max` is unset).
base-meter-groupsizeMeterGroupSize'md'Thickness of the meter bar.
base-meter-groupmaxnumber | undefinedundefinedOptional total baseline. When omitted, the sum of segment values is used.
base-meter-groupshowLegendbooleantrueWhether to render the legend under the bar.
base-meter-groupshowValuebooleantrueWhether legend rows show the absolute value.
base-meter-groupshowPercentbooleantrueWhether legend rows show the percentage share.
base-meter-groupclassstring''Extra host classes merged via `cn()`.