KQ-673 · CATEGORY/BARS
Category Bars
A month's spend sorted heaviest first, each bar drawing in from its left origin on glide under a cascade() stagger so the board settles inside the choreography budget. Bars are scaled against the largest category rather than the total, which keeps the smallest one legible, and the total above them rolls its digits on snap whenever the figures change. Pressing a row unpacks its merchants: a ResizeObserver measures the panel and the frame glides to that height rather than reserving one, while the rows arrive on snap from a nudge of travel; Arrow Up and Down walk the headers, Home and End jump to the ends, Enter and Space toggle.
5 categories · $1,717 total
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/category-bars
Props
- categories
- SpendCategory[]
- default —
- { id, label, amount, merchants? } — sorted internally, heaviest first.
- expanded / defaultExpanded
- string | null
- default null
- Controlled or initial open category id.
- onExpandedChange
- (id: string | null) => void
- default —
- Fires from the click or key that opened or closed a row.
- total
- number
- default —
- The figure that rolls above the board; defaults to the sum of the categories.
- format
- (value: number) => string
- default —
- Formats every amount; defaults to an explicit en-US currency formatter.
- label
- string
- default Spend by category
- Names the board; printed above it.
| Prop | Type | Default | Description |
|---|---|---|---|
| categories | SpendCategory[] | — | { id, label, amount, merchants? } — sorted internally, heaviest first. |
| expanded / defaultExpanded | string | null | null | Controlled or initial open category id. |
| onExpandedChange | (id: string | null) => void | — | Fires from the click or key that opened or closed a row. |
| total | number | — | The figure that rolls above the board; defaults to the sum of the categories. |
| format | (value: number) => string | — | Formats every amount; defaults to an explicit en-US currency formatter. |
| label | string | Spend by category | Names the board; printed above it. |