Home

Meter

A bar that shows where a measure sits within its range.

ui.metercomponents/ui/meter.tsx

Use case

For the AI

Use it for an amount against a limit that is not a task: storage used of the plan, hours of maintenance used this month out of the agreement, seats taken in a subscription, a budget spent against its cap. Set max to the real limit and print the figure in its unit with MeterValue's function (7.4 of 10 GB).

Use it when

  • Storage, seats or hours used against a limit
  • A budget spent against its cap
  • A score within a known range

Use something else when

  • A task moving toward done (an upload, an import): Progress
  • Picking a value along a range: Slider
  • The limit is passed and someone must act: Alert

Examples

Storage
x

Code

Import

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

Usage

export function StorageMeter({ used, limit }: { used: number; limit: number }) {
  const words = `${used} of ${limit} GB`
  return (
    <Meter value={used} max={limit} getAriaValueText={() => words}>
      <div className="flex justify-between text-[12.5px]">
        <MeterLabel className="text-ink-3">Storage</MeterLabel>
        <MeterValue className="tabular-nums text-ink-4">{() => words}</MeterValue>
      </div>
      <MeterTrack className="mt-2">
        <MeterIndicator />
      </MeterTrack>
    </Meter>
  )
}

Rules

  • min and max are the real range (max={10} for 10 GB); the bar shows value within it.
  • MeterValue takes a function that returns the words a person reads (7.4 of 10 GB), in tabular figures; without one it prints a percentage.
  • Give Meter getAriaValueText with the same words, so a screen reader hears the unit too.
  • A meter moves only when the measure changes; it never animates on its own.