Meter

Server-safe gauge for a value in a known range (storage, quota, server load, password strength). Colors by <meter> thresholds, or stacked segments with a legend, like a storage bar.

npx @kznlabs/labsui add meter

Clip storage71 GB of 100 GB

Clips
Thumbnails
Backups

Bot server CPU82%

Password

Very weak

import { Meter } from "@/components/ui/meter";export function Storage() {  return (    <Meter      label="Clip storage"      valueText="71 GB of 100 GB"      segments={[        { label: "Clips", value: 48 },        { label: "Thumbnails", value: 9 },        { label: "Backups", value: 14 },      ]}    />  );}

<Meter>

A measurement within a known range (disk, quota, server load, password strength), not a task's progress (use Progress). Colors follow <meter>: green in the optimum region, orange one region away, red two away.

highdefault max
number
Above this the value is high.
label
ReactNode
Visible name above the bar; also the accessible name.
lowdefault min
number
<meter> thresholds: below low is low, above high is high.
maxdefault 100
number
Upper bound.
mindefault 0
number
Lower bound.
optimumdefault (min + max) / 2
number
Where good is: below low, between, or above high. Decides the color, like <meter>.
segments
Segment[]
Stacked parts with a legend (like a storage bar). Overrides the threshold color.
value
number
Total used. With segments, defaults to their sum.
valueText
string
Text on the right and the accessible value, e.g. "48 GB of 100 GB".

Prop	Type	Default
`high` Above this the value is high.	`number`	`max`
`label` Visible name above the bar; also the accessible name.	`ReactNode`	—
`low` <meter> thresholds: below `low` is low, above `high` is high.	`number`	`min`
`max` Upper bound.	`number`	`100`
`min` Lower bound.	`number`	`0`
`optimum` Where good is: below low, between, or above high. Decides the color, like <meter>.	`number`	`(min + max) / 2`
`segments` Stacked parts with a legend (like a storage bar). Overrides the threshold color.	`Segment[]`	—
`value` Total used. With `segments`, defaults to their sum.	`number`	—
`valueText` Text on the right and the accessible value, e.g. "48 GB of 100 GB".	`string`	—

type Segment: { label: string; value: number; className?: string; }

* required. Every component also takes className.