Meter
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
Meter extends the React Aria Components <Meter> component.
classNamestringMeterHeader
MeterHeader extends the native <div> element.
classNamestringMeterTrack
MeterTrack extends the native <div> element.
classNamestringMeterValue
MeterValue extends the native <span> element.
classNamestringSee the React Aria for the full API reference.
