design-infraReport a problem or share feedback← Catalog
Ai Context Meter
curatedtheme-awarefreesmoothui/ai-context-meter
Context window meter whose ring fills and shifts hue at the warning threshold, never changing size.
$
npx shadcn@latest add @smoothui/ai-context-meternpm deps: lucide-react, motion
Our notes
Context-window meter: a ring that fills and shifts to amber at warningAt / red at dangerAt without ever changing size, with a token breakdown on open. Warning/danger colours are fixed oklch; the rest is tokens. Good for chat headers and agent consoles that should show budget pressure quietly.- Source
- SmoothUI
- Kind
- component
- Categories
- agent-ui, text-effect
- Use as
- drop-in — replaces your component
- Applies to
- agent-uistats
- Motion
- on state · subtle · motion + svg · medium cost · respects reduced motion
- Tags
- ai, context, tokens, meter, usage, ring, spring, complexity-medium, reduced-motion
- Licence
- MIT ("MIT License — Copyright (c) 2024 Eduardo Calvo", github.com/educlopez/smoothui).
- Live demo
- smoothui.dev
- Docs
- smoothui.dev
Similar
Compare all 4 →- Context Cardsbeautifui/context-cardsRetrieved knowledge chunks with their sources.
- Streaming Textbeautifui/streaming-textToken-by-token streaming text with caret. Requires the Beautiful UI foundation.css, which redefines --accent (collides with shadcn).
- Ai Approvalsmoothui/ai-approvalHuman-in-the-loop approval card: the chosen option expands to fill the card and the alternatives collapse away, so the decision reads as final; destructive options get bg-destructive/10. All shadcn tokens (bg-background, border-border, text-muted-foreground) and useReducedMotion throughout — the free, theme-aware alternative to beautifui/approval-card (no foundation.css --accent clash). Pass resolvedId when replaying a transcript.