Meter

Component

About

A brass metering instrument with a rolling reading: live spend that ticks up, or a prepaid balance that counts down. Skeuomorphic, accessible, Base UI. Part of Bevel: bevel-ui.vercel.app

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 * as React from "react"
import { Pause, Play } from "lucide-react"
import {
  Meter,
  MeterButton,
  MeterFlag,
  MeterFooter,
  MeterHeader,
  MeterLabel,
  MeterReading,
  MeterUnit,
} from "@/components/ui/meter"

/** A chat turn's cost on a taxi-style meter, rolling while the model writes. Press Run. */
export function MeterLiveUsage() {
  const [running, setRunning] = React.useState(false)
  const [spent, setSpent] = React.useState(0.142)
  React.useEffect(() => {
    if (!running) return
    const timer = setInterval(
      () => setSpent((s) => s + 0.001 + Math.random() * 0.003),
      400
    )
    return () => clearInterval(timer)
  }, [running])
  return (
    <div className="scale-[2.2] p-24">
      <Meter
        state={running ? "running" : "stopped"}
        aria-label="This turn's cost"
      >
        <MeterHeader>
          <MeterLabel>This turn</MeterLabel>
          <MeterFlag />
        </MeterHeader>
        <div className="flex items-baseline gap-2">
          <MeterReading
            value={spent}
            currency="USD"
            format={{ minimumFractionDigits: 3 }}
          />
          <MeterUnit>so far</MeterUnit>
        </div>
        <MeterFooter>
          <MeterButton onClick={() => setRunning((r) => !r)}>
            {running ? <Pause /> : <Play />}
            {running ? "Stop" : "Run"}
          </MeterButton>
          <MeterButton disabled={running} onClick={() => setSpent(0)}>
            Clear
          </MeterButton>
        </MeterFooter>
      </Meter>
    </div>
  )
}

export default MeterLiveUsage