Show What Happened, in Order.

Create a vertical changelog timeline, newest version first, with a 2px connector line running down a fixed left rail and a 12px dot per entry — emerald for shipped, amber for beta, zinc for planned. Each entry: version label in a small mono pill, relative date with absolute date as the title attribute, title in 18px semibold, two-line summary, and up to three inline links to docs or the feature. Group entries under sticky month headings inside a max-height container. A filter row at the top toggles by status, active filters showing as pressed. Keep entries borderless with 40px spacing so the rail carries the structure, use aria-hidden on the dots while the badge text carries status for screen readers, and indent the whole timeline to a 24px rail below 640px.

Build an order-tracking timeline with exactly five steps: Order placed, Payment confirmed, Shipped, Out for delivery, Delivered. Render oldest-first so the story ends at the outcome. The timeline receives a currentStep prop: steps before it show a filled emerald dot and regular text, the current step shows a larger pulsing dot with an "In progress" badge, and future steps show hollow zinc dots with dimmed text. Each step has a title, a timestamp when completed or "Pending" when not, and an optional detail line such as carrier and tracking number on the Shipped step. Draw the connector segments between dots individually so completed segments are emerald and upcoming ones are zinc-200. Add aria-current="step" on the active entry and make the whole component readable as a list with a single heading.

Create a workspace activity feed as a vertical timeline. Entries are actor actions: "Ana invited two members", "Invoice #1042 was paid", "Project Atlas was archived". Group entries under day headings — Today, Yesterday, then explicit dates — with a thin divider between groups. Each entry shows a 28px avatar, the actor name in medium weight, the action with the object as a link, and a relative time like "14m ago" right-aligned with the absolute timestamp as title. The connector rail runs only within each day group so group boundaries stay visible. Load 20 entries initially and render a "Show older activity" button that appends the next page and keeps the rail continuous. Add actor and event-type filters as small pills, and keep each entry a single list item so screen readers get one coherent list.

Create a horizontal process timeline with four fixed steps: Connect, Configure, Test, Launch. On desktop, lay steps left to right along a 2px connector that fills emerald up to the current step. Each step is a numbered circle — filled and numbered for done, ringed and pulsing for current, grey for upcoming — with a title and one-line description underneath, centered per column. Space columns evenly with flex so the line segments between circles stay equal, and label each segment connector separately so progress colors per segment. Below 640px, switch to a compact vertical variant with the same steps, dots on a left rail, keeping the currentStep prop identical. Add aria-current="step" and a visually hidden ordered list wrapper so the step sequence is announced correctly.

Build an incident timeline for a status page, oldest event first: "09:14 UTC — Error rate spike detected on checkout API", "09:21 — Incident declared, engineers paged", "09:47 — Root cause identified", "10:03 — Fix deployed, monitoring recovery", "10:22 — Incident resolved". Timestamps in 13px mono on a fixed-width left column, event text to the right, and a severity dot per entry — red for detection, amber for investigation, emerald for resolution. Every timestamp is absolute UTC, never relative, because the report must survive screenshots. Include a summary header with total duration and current status badge, and make each entry copyable: a small copy icon per row copies "HH:MM — event text" to the clipboard. The component takes the events as a plain array so the same data can also emit the post-mortem text.

Create a public roadmap timeline for the current quarter. Entries are initiatives with a status: planned in zinc, in progress in amber, shipped in emerald. Render newest activity first with the dot color carrying status, and add a filter bar of three toggle pills that narrows the list, with counts per status shown inside the pills. Each entry: title in semibold, one-line description, a small tag for the target area like Billing or Mobile, and a "Shipped in v2.4" or "Targeting October" line in smaller text. Keep it borderless on the left rail so the roadmap feels like a living document, and add an email-capture field under a "Get updates" heading at the end of the list rather than as a separate modal. Empty filter states show "Nothing in progress right now — see what shipped" with a one-click switch to the shipped filter.