JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 12
  • Score
    100M100P100Q69357F
  • License MIT

Web UI for Claude Code usage statistics

Package Exports

  • ccusage-ui
  • ccusage-ui/server.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ccusage-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ccusage-ui

Web UI dashboard for Claude Code usage statistics.

screenshot

port npm

Quick Start

npx ccusage-ui

Or install globally:

npm install -g ccusage-ui
ccusage-ui

Features

  • Daily/Monthly usage trend charts
  • Model breakdown visualization
  • Token usage and cost tracking
  • User level tier display
    • 🟣 Legendary (100M+): Opus 4.5 Class
    • 🟣 Mega (50M+): Sonnet 4.5 Class
    • πŸ”΄ Power (10M+): Haiku 4.5 Class

Requirements

  • ccusage - CLI tool for Claude Code usage

Author

Doha Park - Creator of CrewX

"Do you use Claude Code like an employee? Manage your whole AI team with CrewX."

X Threads LinkedIn

Tier Icons

Tier icons were generated using Gemini (via λ‚˜λ…Έλ°”λ‚˜λ‚˜ ν”„λ‘œ) and extracted with chroma key processing.

Image Generation Prompt 
Create a 5x2 grid of League of Legends style tier icons.
Image aspect ratio: 5:2 (e.g., 2500x1000px or similar)
Each cell should be square and contain one icon, clearly separated with no effects bleeding between cells.

IMPORTANT - Background colors per cell (for chroma key extraction):
- Green (#00FF00): Challenger, Grandmaster, Master, Gold, Silver, Bronze, Iron
- Magenta (#FF00FF): Diamond, Emerald, Platinum (these have cyan/green colors, so use magenta background)

CRITICAL - DO NOT use these colors in the icons themselves:
- Icons with green background: DO NOT use pure green (#00FF00) or similar bright greens in the icon
- Icons with magenta background: DO NOT use pure magenta (#FF00FF) or similar magentas in the icon
- These colors are reserved for background removal (chroma key)

Grid layout (left to right):
- Row 1: Challenger(green bg), Grandmaster(green bg), Master(green bg), Diamond(magenta bg), Emerald(magenta bg)
- Row 2: Platinum(magenta bg), Gold(green bg), Silver(green bg), Bronze(green bg), Iron(green bg)

Icon descriptions (G=green bg, M=magenta bg):
1. Challenger (G) - Golden winged crown emblem with red gems
2. Grandmaster (G) - Red/orange flaming emblem with golden wings
3. Master (G) - Crimson red shield emblem with flame accents
4. Diamond (M) - Cyan/light blue crystalline shield emblem
5. Emerald (M) - Green gemstone shield emblem with facets
6. Platinum (M) - Silver-white metallic shield emblem with teal accents
7. Gold (G) - Golden shield emblem with warm yellow glow
8. Silver (G) - Silver metallic shield emblem with cool gray tones
9. Bronze (G) - Bronze/copper shield emblem with warm brown tones
10. Iron (G) - Dark gray iron shield emblem, simplest design

Icon style: metallic shields with gemstones, fantasy game aesthetic, detailed 3D rendering.
All icons should be shield/emblem shaped for visual consistency (like League of Legends rank badges).

License

MIT