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

<ply-meter-group [value]="items"></ply-meter-group>

TypeScript

import { MeterGroupItem } from './types';

readonly items: MeterGroupItem[] = [
  { label: 'Apps', value: 16, color: 'primary' },
  { label: 'Messages', value: 8, color: 'success' },
  { label: 'Media', value: 24, color: 'warning' },
  { label: 'System', value: 10, color: 'danger' },
];

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-meter-group-example',
  imports: [
    MeterGroupComponent
  ],
  template: `...`
})
export class MeterGroupExampleComponent {}

Install

bash

npx ply-ui-cli add meter-group

With icons

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

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

HTML

<ply-meter-group [value]="withIcons" size="lg"></ply-meter-group>

TypeScript

readonly withIcons: MeterGroupItem[] = [
  { label: 'Users', value: 40, color: 'primary', icon: 'users' },
  { label: 'Servers', value: 25, color: 'success', icon: 'server' },
  { label: 'Database', value: 20, color: 'accent', icon: 'database' },
  { label: 'Storage', value: 15, color: 'warning', icon: 'grid' },
];

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-meter-group-example',
  imports: [
    MeterGroupComponent
  ],
  template: `...`
})
export class MeterGroupExampleComponent {}

Install

bash

npx ply-ui-cli add meter-group

Sizes

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

HTML

<ply-meter-group size="sm" [value]="items" [showLegend]="false"></ply-meter-group>
<ply-meter-group size="md" [value]="items" [showLegend]="false"></ply-meter-group>
<ply-meter-group size="lg" [value]="items" [showLegend]="false"></ply-meter-group>
<ply-meter-group size="xl" [value]="items" [showLegend]="false"></ply-meter-group>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-meter-group-example',
  imports: [
    MeterGroupComponent
  ],
  template: `...`
})
export class MeterGroupExampleComponent {}

Install

bash

npx ply-ui-cli add meter-group

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

<ply-meter-group [value]="storage" [max]="100" size="lg"></ply-meter-group>

TypeScript

readonly storage: MeterGroupItem[] = [
  { label: 'Documents', value: 18, color: 'primary' },
  { label: 'Photos', value: 32, color: 'success' },
  { label: 'Videos', value: 22, color: 'warning' },
];

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-meter-group-example',
  imports: [
    MeterGroupComponent
  ],
  template: `...`
})
export class MeterGroupExampleComponent {}

Install

bash

npx ply-ui-cli add meter-group

Legend options

Toggle showLegend, showValue, and showPercent.

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

HTML

<ply-meter-group
  [value]="items"
  [showValue]="false"
  [showPercent]="true">
</ply-meter-group>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-meter-group-example',
  imports: [
    MeterGroupComponent
  ],
  template: `...`
})
export class MeterGroupExampleComponent {}

Install

bash

npx ply-ui-cli add meter-group

Installation

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

bash

npx ply-ui-cli add meter-group

API Reference

For AI agents

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

bash

npx -y ply-ui-mcp

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

typescript (Example)

// Install: npx ply-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
API	Member	Type	Default	Description
`ply-meter-group`	`value`	`MeterGroupItem[]`	`[]`	Segments to render. Widths are proportional to each item's `value` relative to `max` (or the sum of values when `max` is unset).
`ply-meter-group`	`size`	`MeterGroupSize`	`'md'`	Thickness of the meter bar.
`ply-meter-group`	`max`	`number \| undefined`	`undefined`	Optional total baseline. When omitted, the sum of segment values is used.
`ply-meter-group`	`showLegend`	`boolean`	`true`	Whether to render the legend under the bar.
`ply-meter-group`	`showValue`	`boolean`	`true`	Whether legend rows show the absolute value.
`ply-meter-group`	`showPercent`	`boolean`	`true`	Whether legend rows show the percentage share.
`ply-meter-group`	`class`	`string`	`''`	Extra host classes merged via `cn()`.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).