Meter

Component 1

About

Linear meter for how much of a limit is used, like storage or an API quota, with stacked segments, a legend and thresholds that change the colour. Unlike Progress, which tracks a task, it shows an amount against a limit.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Meter to your project and fits it to your theme.

Code

How Meter is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

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

export default function MeterDemo() {
  const storage = [
    { label: "Photos", value: 14.6 },
    { label: "Videos", value: 11.2 },
    { label: "Documents", value: 6.9 },
    { label: "Backups", value: 5.5 },
  ];
  const used = storage.reduce((sum, s) => sum + s.value, 0).toFixed(1);

  return (
    <div className="w-full max-w-xl rounded-md border border-border bg-card p-5 text-card-foreground">
      <Meter
        segments={storage}
        max={100}
        size="lg"
        getValueText={() => `${used} of 100 GB`}
      >
        <MeterHeader>
          <MeterLabel>Storage</MeterLabel>
          <MeterValue>{`${used} of 100 GB`}</MeterValue>
        </MeterHeader>
        <MeterTrack />
        <MeterLegend format={(v) => `${v} GB`} />
      </Meter>
    </div>
  );
}