Meter
A graphical representation of a measured value within a fixed range, perfect for showing scores, ratings, or resource usage. It provides clear visual feedback.
Installation
Install the component via the CLI in one command.
npx shadcn@latest add @intentui/meter
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
Manual installation
Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.
npm install react-aria-components tailwind-merge
Anatomy
import { Meter } from "@/components/ui/meter"
<Meter label="Storage space" value={32} />Examples
Decimal format
By default, the meter will display the value as a percentage. You can change the format of the value by passing a formatOptions prop. This example is shown decimal format.
Currency format
You can also change the currency format of the value by passing a formatOptions prop. This example is shown currency format.
Component API
Meter
The Meter component displays a value within a known range.
| Prop | Type | Default |
|---|---|---|
className | string | - |
MeterHeader
The MeterHeader component groups meter label and value content.
| Prop | Type | Default |
|---|---|---|
className | string | - |
MeterTrack
The MeterTrack component renders the meter track.
| Prop | Type | Default |
|---|---|---|
className | string | - |
MeterValue
The MeterValue component displays the formatted meter value.
| Prop | Type | Default |
|---|---|---|
className | string | - |
See the React Aria for the full API reference.
Unlock the full power ofIntent UI Design
Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.