Composed
Dashboard cards
Stat strip, tile stats, task breakdown, segment donut and meeting rows.
Open pipeline
$486K+8.4%vs prev
Conversion
3.8%-0.5%vs last week
Avg cycle
21d-6.2%vs last week
New feedback
This week8
+12.5%vs last week
Meeting requests
Total active2
+2.0%vs last week
Overall tasksSpread across 6 projects
Tasks23
On going12Task
Under review6Task
Finish5Task
Customer segments+5.8%
Enterprise$9,45042%
Mid-market$8,32037%
SMB$4,78021%
Apr 14, 202610:00 am/ 30 minutes
Director of ITTech SystemsMEMeydenaDODominic
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/dashboard.jsonStat strip items hug
They do not stretch. Figma sizes each item to its content with a fixed gap, and
the comparison text sits 4px after the delta. An earlier version gave each item
flex-1 plus a spacer, which flung "vs prev" to the far right of its column —
solving a collision that hugging already prevents.
The donut band is 26px
Not 20, not 32. r=87 on a 200px ring. Those numbers come from the Figma
component, and the legend beside it is a fixed 300px rather than a fill, so it
sits next to the ring instead of stretching to the card edge.
Task bars are hatched
Each segment carries a diagonal hatch as well as a hue, so the breakdown survives greyscale and colour blindness. See Data display for the geometry.
| Prop | Type | Default | Description |
|---|---|---|---|
| stats | Stat[] | — | StatStrip. label, value, delta, direction, sentiment, comparison. |
| tone | "neutral" | "brand" | "success" | "warning" | — | IconTile and TileStatCard. Neutral alone carries an outline. |
| series | Series[] | — | TaskSummaryCard. label, count, color, stripe. |
| segments | Segment[] | — | DonutCard. label, value, percent, color. |
| active | string | null | — | DonutCard. Focuses one slice and dims the rest. |
| onClick | () => void | — | MeetingRow. Makes the row openable and keyboard-reachable. |