Meter

Component 2

About

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.

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

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>
  );
}