Components
List rows
Group header, numbered row, status item and history row.
TODAY
YESTERDAY
1Seats are billed on the prior term, not the live count
2Overage is invoiced monthly in arrears
3Notice must be given 60 days before renewal
Notion — seat correction
Datadog — true-up
Figma — renewal locked
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/list-rows.jsonNumbered rows have a number column
Not a CSS list marker. Once one item wraps to a second line, a marker stops aligning with the others — the number column keeps the digits on one edge however long the labels get.
The dot pulses only while active
A list where every dot animates is noise, and the eye stops reading it as movement within about a second. Idle items get a neutral dot and muted ink.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | GroupHeader and StatusItem. |
| n | number | — | NumberedRow. Rendered in an outlined disc. |
| active | boolean | — | StatusItem pulses; HistoryRow gets bg/selected. |
| tone | "brand" | "success" | "warning" | "danger" | "brand" | StatusItem dot colour when active. |