Skip to content

Stack

GraphStack

Stacked bar for parts of a whole. Different glyphs per segment instead of colors.

Command

pnpm dlx shadcn@latest add <origin>/r/graph-stack.json

Bundle

Each segment gets its own glyph. js is the accent.

[ BUNDLE ]
  • marketing
  • docs
  • js
  • css
  • images

Tokens

Single row showing how token usage splits.

[ TOKENS ]
  • week
  • prompt
  • completion
  • cached

Props

PropTypeDefaultDescription
titlestringCaption drawn on the top edge of the frame.
rowsStackRow[]Each row has a label and labeled numeric segments.
accentstringSegment label to paint with the accent. Defaults to the first.
ticksnumber24Bar width in characters.
glyphs"shade" | "ascii" | "hash" | "bar" | string[]One character per segment, or a preset. Defaults to █▓▒░#=+ -.
cornerstring"+"Character at each corner of the frame.
classNamestringPassed to the outer frame.