Data Display · astro-ui · TimelineNew

Timeline

Ordered event list with markers, connector rails, and time stamps.

Timeline is a semantic <ol> of events; TimelineItem draws the marker, the connector rail, and the body. Because it is real document order, “list, 4 items” announcements and keyboard reading stay correct without any ARIA scaffolding. The rail is drawn by each item and stops at the last one automatically, so reordering or filtering items never leaves a dangling line.

← All components

Features

  • Semantic `<ol>` / `<li>` — no list role needed
  • Marker variants: neutral, primary, success, warning, destructive, info
  • Optional `active` halo marks the current event
  • Custom glyphs through the `marker` slot
  • Two scales (`sm`, `md`) shared by list and items
  • Rail stops at the last item automatically

Usage

---
import { Timeline, TimelineItem } from "astro-ui";
---

<Timeline ariaLabel="Deployment history">
  <TimelineItem variant="success">
    <time slot="time" datetime="2026-10-14T09:12Z">Oct 14 · 09:12</time>
    <span slot="title">Deploy v2.5.0</span>
    <span slot="description">Shipped by Ada — 42 files changed.</span>
  </TimelineItem>
</Timeline>

Demos

Deployment history

  1. Deploy v2.5.0

    Production · 42 files changed · 1m 32s

  2. Deploy v2.4.3

    Hotfix for the billing webhook retry loop.

  3. Rollback v2.4.2

    Reverted after a spike in 500s on /api/invoices.
<Timeline ariaLabel="Deployment history">
  <TimelineItem variant="success" active>
    <time slot="time" datetime="2026-10-14T09:12Z">Oct 14 · 09:12</time>
    <span slot="title">Deploy v2.5.0</span>
    <span slot="description">Production · 42 files changed · 1m 32s</span>
  </TimelineItem>
  <TimelineItem variant="info">
    <time slot="time" datetime="2026-10-13T17:40Z">Oct 13 · 17:40</time>
    <span slot="title">Deploy v2.4.3</span>
    <span slot="description">Hotfix for the billing webhook retry loop.</span>
  </TimelineItem>
  <TimelineItem variant="destructive">
    <time slot="time" datetime="2026-10-13T15:02Z">Oct 13 · 15:02</time>
    <span slot="title">Rollback v2.4.2</span>
    <span slot="description">Reverted after a spike in 500s on /api/invoices.</span>
  </TimelineItem>
</Timeline>

Activity feed with custom markers

  1. Ada approved the pull request

    Review took 12 minutes.

  2. CI flagged a flaky test

    auth.session.spec.ts failed twice in a row.

  3. Grace opened the pull request

<Timeline size="sm">
  <TimelineItem variant="primary">
    <span slot="marker" aria-hidden="true">✓</span>
    <time slot="time" datetime="2026-10-14T08:02Z">08:02</time>
    <span slot="title">Ada approved the pull request</span>
    <span slot="description">Review took 12 minutes.</span>
  </TimelineItem>
  <TimelineItem variant="warning">
    <span slot="marker" aria-hidden="true">!</span>
    <time slot="time" datetime="2026-10-14T07:55Z">07:55</time>
    <span slot="title">CI flagged a flaky test</span>
    <span slot="description">auth.session.spec.ts failed twice in a row.</span>
  </TimelineItem>
  <TimelineItem>
    <time slot="time" datetime="2026-10-14T07:41Z">07:41</time>
    <span slot="title">Grace opened the pull request</span>
  </TimelineItem>
</Timeline>

Rich item content

  1. v0.1.0 — First public release

    63 components across 7 categories, with tokens, base styles, and docs.

    Stable

  2. v0.2.0 — Planned

    File upload, a dual-thumb range slider, and a sortable data grid.
<Timeline ariaLabel="Release timeline">
  <TimelineItem variant="success">
    <time slot="time" datetime="2026-10-20">Oct 20, 2026</time>
    <span slot="title">v0.1.0 — First public release</span>
    <div slot="description">
      <p>63 components across 7 categories, with tokens, base styles, and docs.</p>
      <Badge variant="success" size="sm">Stable</Badge>
    </div>
  </TimelineItem>
  <TimelineItem variant="primary">
    <time slot="time" datetime="2026-11-10">Nov 10, 2026</time>
    <span slot="title">v0.2.0 — Planned</span>
    <span slot="description">File upload, a dual-thumb range slider, and a sortable data grid.</span>
  </TimelineItem>
</Timeline>

API

Props

PropTypeDefaultDescription
size"sm" | "md""md"Marker and gap scale for the list.
classstring—Merged via cn(); Tailwind classes welcome.
idstring—Element id.
ariaLabelstring—Accessible name.

Slots

SlotDescription
(default)TimelineItem children.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

  • Ordered list structure announces position and item count
  • Markers and rails are aria-hidden — meaning belongs in the body
  • Optional aria-label names the list (e.g. "Deployment history")

FAQ

How do I put the newest event first?

Render TimelineItem children in that order. Timeline is plain document order — there is no internal sorting, so your data source decides.

Can an item have a custom marker?

Yes. Use the `marker` slot on TimelineItem for a glyph or icon; the marker column is `aria-hidden`, so keep the meaning in the title or description.

Changelog

Version history mentioning Timeline.

v0.1.0 — 2026-11-11
added
  • Data display (10): Badge, Avatar, Attachment, Table, Progress, Bubble, Chart, Empty, Tag, Timeline.