Composed
Timeline
A day laid out against the clock, where a short event stays readable.
Tuesday, 14 April3
08:00
09:00
10:00
11:00
12:00
Vendor call — Notion08:15 · 30 min
Focus — compare quotes09:00 – 10:30 · 90 min
Security review11:00 – 11:45 · 45 min
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/timeline.jsonThe scale has to clear the shortest event
Blocks are positioned and sized from at and duration against hourHeight. A
30-minute event at 68px/hour is 34px tall — under the minimum a block needs for
its title and meta, so it clips.
Mobile runs at 76px/hour for exactly this reason. Check any new scale against the shortest event you intend to show, not the average one.
metaShort exists for the same reason: a compact block swaps to it rather than
truncating the full string mid-word.
| Prop | Type | Default | Description |
|---|---|---|---|
| events | TimeEvent[] | — | title, meta, metaShort, tone, at, duration. |
| at | number | — | Decimal hour — 8.25 is 08:15. |
| duration | number | — | Hours. 0.5 is 30 minutes. |
| hourHeight | number | 84 | Pixels per hour. Mobile uses 76. |
| startHour / endHour | number | 8 / 17 | The visible window. |