Meter

Installation

Add the component with the CLI.

npx shadcn@latest add @intentui/meter

Manual installation

Install the dependencies, then copy the component source into your project.

npm install react-aria-components cn

Anatomy

import { Meter } from "@/components/ui/meter"

<Meter label="Storage space" value={32} />

Examples

Decimal format

The meter displays a percentage by default. Use formatOptions to change the number format. This example uses decimal formatting.

Currency format

Use formatOptions to display the value as a currency amount.

Component API

Meter

MeterHeader

MeterTrack

MeterValue