Meter

Progress summary card that composes Concrete linear and ring progress primitives.

Meter is a bounded progress summary, not a charting framework. Use it for quotas, completion, utilization, and health summaries.

Usage72%

Review58%

58%

Playground

Props in the URL.

Controls update query params directly. Complex slots use curated fixtures so component states stay deterministic, linkable, and screenshot-ready.

Loading playground.

States

Every state maps to the same component render route through the `state` query param.

Usage72%

Review58%

58%

Bar

Linear progress summary with target copy.

Usage72%

72%

Review58%

58%

Ring

Circular progress summary for compact scorecards.

Usage72%

Review34%

34%

Signal

Terminal, ultra, and error signal meters.

Props

Name	Type	Default	Description
`label *`	`string`	-	Meter label shown in the card header.
`value *`	`DataProgressValue`	-	Bounded value object parsed at runtime.
`variant`	`'bar' \| 'ring'`	`bar`	Linear or circular meter rendering.
`tone`	`DataTone`	`sky`	Progress tone mapped to Concrete signals.
`target`	`number`	-	Optional target value called out in the footer.
`unit`	`string`	`%`	Rendered value unit.
`description`	`string`	-	Optional supporting text in the footer.
`compact`	`boolean`	`false`	Tighter rail/ring dimensions.