ui
XGitHub

Meter

Used to represent a value within a fixed scale.

Docs
Tasks Completed
meter-demo.tsx
import { Meter, MeterLabel, MeterValue } from "@/components/ui/meter"
 
export function MeterDemo() {
	return (
		<Meter className="mx-auto w-48" value={4} max={5}>
			<div className="flex items-center justify-between">
				<MeterLabel>Tasks Completed</MeterLabel>
				<MeterValue>{(formattedValue, value) => `${value} / 5`}</MeterValue>
			</div>
		</Meter>
	)
}

Installation

npx shadcn@latest add https://9ui.dev/r/meter.json

Usage

Imports
import { Meter, MeterLabel, MeterValue } from "@/components/ui/meter"
Anatomy
<Meter>
	<MeterLabel />
	<MeterValue />
</Meter>