components / timeline
timeline.
day schedule — a 24h vertical axis with positioned event blocks and an optional live now-line. blocks placed by minutes-of-day; supports clickable blocks, multiple labeled tracks on one axis, streamed marker slots, and opt-in drag editing. generalized from the justin06lee.dev day view.
00:00
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
deep work
standup
reading
sleep
installation
bunx @justin06lee/chrome@latest add timelineprops
| name | type | default | description |
|---|---|---|---|
| events | TimelineEvent[] | - | { startMin, endMin, label?, color? }[] — single-track events. ignored when tracks is set. |
| tracks | TimelineTrack[] | - | { label?, events, onEventClick? }[] — N labeled columns side by side sharing one hour axis, grid, markers and now-line (e.g. plan vs actuals). per-track onEventClick overrides the top-level one. |
| showNow | boolean | - | live red now-line, ticks each minute. |
| nowMinutes | number | - | override now-line position (minutes of day). |
| markers | Array<{ minutes: number; label: string; color?: string }> | - | labeled full-width marker lines at minutes-of-day (e.g. prayer times), label at the right edge. |
| markersSlot | ReactNode | - | react slot rendered in the marker layer, so markers can stream in — e.g. a <Suspense>-wrapped server component rendering the exported TimelineMarker primitive. |
| onEventClick | (event: TimelineEvent) => void | - | when set, blocks render as keyboard-accessible buttons with a subtle hover ring and call this on click. display-only when absent. |
| onEventChange | (event, next: { startMin; endMin }) => void | - | opt-in editing: blocks become drag-to-move with a bottom resize handle; called once on drop with the proposed times. |
| snapMinutes | number | - | snap increment for drag editing. default 5. |