Activity timeline

Lists timestamped events with actors and optional expandable details.

Preview

6 September, 09:00
Published

In action

Sep 5, 2026, 10:00 AM
Revision published
Studio
Updated the vehicle controls
Details
Numeric baselines and playback spacing are now shared.

When to use

Use it for

Audit history, project activity, and chronological event records.

Not for

Steps toward a goal; use Stepper or TaskProgress.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { ActivityTimeline } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/activity-timeline.

2. Vendor the source

npx @noorddev/vlak-cli add activity-timeline

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/activity-timeline.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { ActivityTimeline } from "@noorddev/vlak-react";

<ActivityTimeline events={[{ id: "release", title: "Revision published", dateTime: "2026-09-05T10:00:00Z", actor: "Studio", description: "Updated the vehicle controls", details: "Numeric baselines and playback spacing are now shared." }]} />

Props

ActivityTimeline

Chronological events in caller-supplied order, with optional native disclosures.

Prop	Type	Default
`events`required	`ActivityEvent[]`
`emptyLabel`	`string`	`"No activity yet"`
`locale`	`string`	`"en"`
`timeZone`	`string`	`"UTC"`

Also accepts HTMLAttributes<HTMLOListElement>.

Keyboard

Keys	Does
`Tab, Enter, Space`	Tab reaches each summary; Enter or Space expands the native disclosure.

Accessibility

An ordered list with machine-readable time elements. Optional details use native disclosure semantics.

Markup

<ol class="rs-activity-timeline"><li class="rs-activity-timeline-event"><time class="rs-activity-timeline-time" datetime="2026-09-05T10:00:00Z">5 September, 10:00</time><div><p class="rs-activity-timeline-title">Revision published</p></div></li></ol>

Classes

.rs-activity-timeline.rs-activity-timeline-event.rs-activity-timeline-time.rs-activity-timeline-title.rs-activity-timeline-body.rs-activity-timeline-summary