Meter

Installation

bunx @prototyperco/cli add meter

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/meter.json

npx shadcn@latest add https://prototyper-ui.com/r/meter.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/meter.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/meter.json

This will add the following files to your project:

• components/ui/meter.tsx

Usage

import {
  Meter,
  MeterTrack,
  MeterIndicator,
  MeterLabel,
  MeterValue,
} from "@/components/ui/meter";

<Meter value={60}>
  <MeterLabel>Storage</MeterLabel>
  <MeterTrack>
    <MeterIndicator />
  </MeterTrack>
</Meter>;

Anatomy

<Meter>
  <MeterLabel />
  <MeterValue />
  <MeterTrack>
    <MeterIndicator />
  </MeterTrack>
</Meter>

Examples

Custom Format

Reusable

Value Format

Styling

Data Slots

Use data-slot attributes to target specific parts of the meter:

Customization Examples

/* Make the meter track taller */
[data-slot="meter-track"] {
  @apply h-4 rounded-lg;
}

/* Custom indicator color */
[data-slot="meter-indicator"] {
  @apply bg-gradient-to-r from-blue-500 to-purple-500;
}

{
  /* Override track color via className */
}
<MeterTrack className="bg-blue-100" color="default">
  <MeterIndicator className="bg-blue-500" />
</MeterTrack>;

API Reference

Meter

Root component that provides meter value context.

All Base UI Meter.Root props are forwarded via ...props.

MeterTrack

Background track that contains the indicator.

All Base UI Meter.Track props are forwarded via ...props.

MeterIndicator

The filled portion of the track representing the current value.

All Base UI Meter.Indicator props are forwarded via ...props.

MeterLabel

Accessible label for the meter.

All Base UI Meter.Label props are forwarded via ...props.

MeterValue

Displays the current meter value as formatted text.

All Base UI Meter.Value props are forwarded via ...props.

meterTrackVariants

A cva helper exported for applying meter track styles outside of the <MeterTrack> component.

import { meterTrackVariants } from "@/components/ui/meter";

<div className={meterTrackVariants({ color: "success", size: "lg" })}>
  Custom track
</div>;

meterIndicatorVariants

A cva helper exported for applying meter indicator styles outside of the <MeterIndicator> component.

import { meterIndicatorVariants } from "@/components/ui/meter";

<div className={meterIndicatorVariants({ color: "warning" })}>
  Custom indicator
</div>;

Accessibility

Keyboard Interactions

The meter is a non-interactive display element and does not have keyboard interactions. Focus management is handled by surrounding interactive elements.

ARIA Attributes

• The meter renders with role="meter" via the Base UI primitive.
• aria-valuenow reflects the current value.
• aria-valuemin and aria-valuemax define the range.
• aria-labelledby is automatically linked to MeterLabel when present.
• Screen readers announce the meter value and its label.

Related