A labeled progress indicator that shows either spend against a budget (escalating color at 75% and 90%) or a segmented working-memory bar with a breakdown legend.
import Meter from "@/components/ui/meter";
export default function MeterDemo() {
const pct = (v: number) => v + "%";
return (
<div
style={{
padding: "28px",
fontFamily: "var(--font-sans)",
color: "var(--ink-primary)",
display: "flex",
flexDirection: "column",
gap: "30px",
maxWidth: "520px",
}}
>
<Meter
label="How much of this job is done"
used={46}
budget={100}
format={pct}
showBudget={false}
breakdown={[
{ label: "Reading", value: 24 },
{ label: "Thinking", value: 18 },
{ label: "Writing", value: 4 },
]}
/>
<Meter
label="Spent today"
used={7.4}
budget={9}
format={(v: number) => "$" + v.toFixed(2)}
/>
<Meter
label="Tasks used this month"
used={4820}
budget={5000}
unit="tasks"
/>
<Meter
label="What it is holding in mind"
total={200000}
segments={[
{ label: "Its instructions", value: 12000 },
{ label: "What it has read", value: 141000 },
{ label: "Your conversation", value: 38000 },
]}
/>
</div>
);
}