seamui

Context Meter

A compact ring gauge of context-window usage, sized to sit inline in a composer footer or workbench header. Map tokens-used and window-size straight onto value and max.

x
tsx
import { ContextMeter } from "@/registry/seam/ui/context-meter"

// Map tokens-used / window-size straight onto value / max.
export default function ContextMeterDemo() {
  return <ContextMeter value={124_000} max={200_000} size="md" showValue />
}
bunx --bun @seamui/cli@latest add context-meter

Notes

  • Built on Base UI Meter: it announces as a measurement (role="meter"), not task progress — context usage is a level, not a loading bar. Pass getAriaValueText for a friendlier announcement (e.g. “124k of 200k tokens”).
  • Past criticalAt (default 0.85) the arc and value turn destructive — the monochrome theme's one “act now” hue — and data-critical appears for styling hooks.
  • Fill changes ease the dash offset (a layout dimension that can't spring cleanly, same rule as Meter's width) and stop animating under reduced motion via motion-reduce:transition-none.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.