Components
Status and priority
Five states that differ by shape, and four priorities that differ by count.
TodoIn progressReviewDoneCancelled
lowmediumhighurgent
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/status.jsonShape first, colour second
Each status is a distinct shape, not merely a different colour: an empty ring, a half-filled ring, a filled ring, a tick, a slash. Colour reinforces the difference; it never carries it alone.
Priority counts bars
Priority is a count — one bar, two, three — with a hue. High and Urgent both
show three bars, so Urgent adds an bg/error-tint backing behind them.
Without it the two rendered identically, which made the highest priority in the
system invisible.
| Prop | Type | Default | Description |
|---|---|---|---|
| status | "todo" | "in-progress" | "review" | "done" | "cancelled" | — | StatusGlyph. Each is a distinct shape. |
| level | "none" | "low" | "medium" | "high" | "urgent" | — | PriorityBars. |