184 Components
Context Token Gauge
CardsLLM context window capacity meter with radial and segmented linear bar variants, token breakdown metrics (System, Prompt, Completion), and adaptive threshold alerts.
Context Window
Claude 3.5 Sonnet (128k)
Optimal
38%48.2k / 128.0k
79.8k tokens remaining headroom
System
4.2k
Prompt
31.3k
Completion
16.9k
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/context-token-gauge.json"
Props
TypeScript props supported by <ContextTokenGauge />.
| Prop | Type | Default | Description |
|---|---|---|---|
| usedTokens | number | 42800 | Total tokens currently occupied. |
| maxTokens | number | 128000 | Total context window capacity limit. |
| variant | "radial" | "bar" | "radial" | Display mode between radial circular meter or linear segmented bar. |
| modelName | string | "Claude 3.5 Sonnet (128k)" | Badge text indicating the model or architecture. |
| showBreakdown | boolean | true | Show segment detail cards underneath the gauge. |
Key Features
- Radial SVG arc and linear segmented bar modes.
- Dynamic color shifts: Optimal (<75%), High Load (75-90%), and Near Limit (>90%).
- Breakdown metrics for System prompt, User prompt, and Model completion tokens.
- Compact responsive container with high contrast dark/light theme support.
Keyboard & Accessibility
- Textual percentage and token metrics accessible to screen readers.
- Respects prefers-reduced-motion for circle transitions.