Meter

A gauge for a value within a known range.

Build minutes

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

export default function MeterBasic() {
  return (
    <Meter value={64} className="w-full max-w-sm">
      <MeterLabel>Build minutes</MeterLabel>
      <MeterValue />
    </Meter>
  );
}

Installation

Add the registryOnce per project
pnpm dlx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
Add meter
pnpm dlx shadcn@latest add @jarvis/meter

Usage

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

export function BuildMinutes() {
  return (
    <Meter value={64}>
      <MeterLabel>Build minutes</MeterLabel>
      <MeterValue />
    </Meter>
  );
}

Use a meter for a measurement within a range, such as storage used, and Progress for a task that's underway.

Composition

Meter
- MeterLabel
- MeterValue

Examples

Formatted value

MeterValue shows a percentage by default. Pass a function as its children to format it yourself. Set max when the range isn't 0 to 100.

Storage

Seats

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

export default function MeterFormattedValue() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <Meter value={2.4} max={10}>
        <MeterLabel>Storage</MeterLabel>
        <MeterValue>{(_, value) => `${value.toFixed(1)} of 10 GB`}</MeterValue>
      </Meter>
      <Meter value={17} max={25}>
        <MeterLabel>Seats</MeterLabel>
        <MeterValue>{(_, value) => `${value} of 25`}</MeterValue>
      </Meter>
    </div>
  );
}

Colors

Recolor the indicator by targeting its data-slot from the root.

Build minutes

Bandwidth

Requests

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

export default function MeterColors() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <Meter value={78} className="**:data-[slot=meter-indicator]:bg-warning">
        <MeterLabel>Build minutes</MeterLabel>
        <MeterValue />
      </Meter>
      <Meter value={94} className="**:data-[slot=meter-indicator]:bg-destructive">
        <MeterLabel>Bandwidth</MeterLabel>
        <MeterValue />
      </Meter>
      <Meter value={52} className="**:data-[slot=meter-indicator]:bg-brand">
        <MeterLabel>Requests</MeterLabel>
        <MeterValue />
      </Meter>
    </div>
  );
}

Props

Part	Extends
Meter	Base UI's Meter.Root
MeterTrack	Base UI's Meter.Track
MeterIndicator	Base UI's Meter.Indicator
MeterLabel	Base UI's Meter.Label
MeterValue	Base UI's Meter.Value

The tables leave out className, style and render. Parts built on Base UI take them as its styling and composition guides describe.

Meter

Prop	Type	Default
`aria-valuetext` A string value that provides a user-friendly name for `aria-valuenow`, the current value of the meter.	`string`	—
`format` Options to format the value.	`Intl.NumberFormatOptions`	—
`getAriaValueText` A function that returns a string value that provides a human-readable text alternative for `aria-valuenow`, the current value of the meter.	`((formattedValue: string, value: number) => string)`	—
`locale` The locale used by `Intl.NumberFormat` when formatting the value. Defaults to the user's runtime locale.	`Intl.LocalesArgument`	—
`max` The maximum value	`number`	`100`
`min` The minimum value	`number`	`0`
`value` The current value.	`number`	—

MeterValue

Prop	Type	Default
`children`	`((formattedValue: string, value: number) => React.ReactNode) \| null`	—