Meter
Live example
Meter
Installation
npx shadcn@latest add https://hextech-ui.vercel.app/r/meter.jsonAPI reference
These are the main Meter options. See the exported TypeScript types for inherited native or primitive props.
| Prop | Type | Default |
|---|---|---|
label | string (required) | — |
value | number (required) | — |
min / max | number | 0 / 100 |
tone | gold | teal | destructive | teal |
getAriaValueText | (formattedValue, value) => string | — |
Composition notes
Meter describes a measurement within a known range; Progress describes task completion. Supply a visible label, a numeric value and meaningful min/max bounds. getAriaValueText can describe units such as health or energy. Tone supplements the number rather than replacing it.