Timeline

A vertical run of events sharing one rail — deploys, incidents, review activity, an agent run. The connector stops at the last item instead of dangling past it.

src/components/ui/timeline.tsx

About

From the component's own source, where it was written.

A vertical run of events sharing one rail.

The connector is drawn by each item rather than by the container, as a line that stops at the last one (last:before:hidden). A single line behind the whole list is easier to write and wrong at both ends: it overshoots the final marker and starts above the first.

An ordered list, because a timeline is one — sequence is the meaning, and a screen reader should announce the count and position.

Install

npx astralyx-ui add timeline

Usage

import { Timeline, TimelineItem } from '@/components/ui/timeline'

<Timeline>
  <TimelineItem title="Deployed to production" time="2m ago" tone="success" />
  <TimelineItem title="Checks passed" time="6m ago" tone="info" />
</Timeline>

Composer

Change the props and the source below follows.

Deployed to production
2m ago
Release 1.4.2
Checks passed
6m ago
Commit pushed
8m ago
Awaiting review
—

Props

last step pendingbody content

tsx

<Timeline>
  <TimelineItem title="Deployed to production" time="2m ago" tone="success" icon={<Rocket />} />
  <TimelineItem title="Checks passed" time="6m ago" tone="info" />
  <TimelineItem title="Awaiting review" tone="muted" pending />
</Timeline>

Examples

Deploy history

tsx

<Timeline>
  <TimelineItem title="Deployed to production" time="2m ago" tone="success" icon={<Rocket />}>
    <TimelineContent>astralyx-ui@1.4.2 · 42s</TimelineContent>
  </TimelineItem>
  <TimelineItem title="Build passed" time="4m ago" tone="info" icon={<Package />} />
  <TimelineItem title="Queued" time="5m ago" tone="muted" pending />
</Timeline>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Timeline`

A vertical run of events sharing one rail.

Extends ComponentProps<'ol'>.

`TimelineItem`

Extends ComponentProps<'li'>.

Prop	Type	Default	Description
title	string	required	The event. Required — an item with only a body has nothing to scan.
icon	ReactNode	—	Replaces the default dot.
time	ReactNode	—	Right-aligned from `sm` up, and under the title on narrow screens.
tone	'default' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'muted'	'default'	Marker colour.
pending	boolean	false	Draw the marker as an outline, for an event that has not happened yet.

`TimelineContent`

A framed body under an event — a log excerpt, a diff, a message.

Extends ComponentProps<'div'>.