Timeline
A vertical milestone timeline with dated nodes by status, progress-filling connectors, quotes, drawn thumbnails and links, an alternating layout on wide containers and collapsible older items.
Preview
Seat pricing launch
4 of 7 milestones doneDesign sign-off
Completed.Plan picker, v3 Private beta
Completed.212 workspaces opted in.
“Seat pricing finally matches how our team actually grows.”
— Malik H., ops lead at a beta workspace Usage metersNow
In progress.Live meters on the billing page; conversion is up 9% in the beta.
Regional pricing
Upcoming.Local currencies for EU and APAC.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | TimelineItem[] | — | Oldest first: { id, date, dateTime?, title, description?, status, icon?, media? }. |
| items[].status | "done" | "current" | "upcoming" | — | Node look, connector fill and hidden status text. |
| items[].media | quote | thumb | links | — | { kind: "quote", text, author }, { kind: "thumb", art: "chart" | "screens" | "route", alt, caption? } or { kind: "links", links }. |
| variant | "default" | "alternate" | "default" | Alternate sides around a centred rail when the container is at least 36rem wide. |
| collapseAfter | number | — | Keep only the last n done items visible behind a “Show earlier” toggle. |
| label | string | "Timeline" | Accessible name of the list. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.