A linear meter that shows how much of a limit is used, like storage or an API quota, with stacked segments, a legend and colour-changing thresholds.
"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>
);
}
Part of Hirael — browse the full library on 21st.dev.