Usage Bar
Segmented token usage with a legend and reset date.
Monthly usage
80% of 2M tokens
ChatAgentsAPI
● Resets in 9 days
When to use
- Segmented token usage with a legend and reset date.
- You want a billing piece that already handles empty, loading and dark states.
Installation
Add Usage Bar with the shadcn CLI – your project needs a components.json – or copy the file by hand.
Pro items install with your personal access key – set it up once, then the command below works.
$ npx shadcn@latest add https://ui.elysiumdesigns.in/r/usage-bar.jsonAPI reference
UsageBar
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | – | Extra classes on the root element. |
look | "classic" | "clean" | "classic" | Visual style. Both follow your light or dark theme. |