Timeline
Timeline
A vertical sequence for releases, project activity, milestones and other ordered events. Use variant="roadmap" when each step needs a stronger card treatment and a separate period column.
import { Timeline } from "@pompeitech/vesuvius-ui";Roadmap
- Q1
Foundations
Tokens, accessibility and primitives. - Q2
Compositions
Dashboard-ready organisms. - Q3
Admin Kit
A complete product shell.
Activity
Project created
Workspace initialized.Review requested
Waiting for feedback.Deployment scheduled
API
Timeline
| Prop | Type | Default | Description |
|---|---|---|---|
items | TimelineItem[] | Ordered events to render. | |
variant | "default" | "roadmap" | "default" | Uses compact activity styling or milestone cards with a period column. |
className | string | Additional classes for the root list. | |
aria-label | string | "Timeline" | Accessible name for the ordered list. |
TimelineItem
| Prop | Type | Description |
|---|---|---|
id | string | Stable key for the item. |
title | string | Primary event label. |
description | ReactNode | Supporting content. |
date | ReactNode | Date, time or period. In roadmap mode it is shown in the period column. |
meta | ReactNode | Optional secondary metadata. |
icon | ReactNode | Optional content inside the marker. |
status | "default" | "active" | "success" | "warning" | "destructive" | "muted" | Marker semantic state. |
onClick | () => void | Makes the event content an accessible button. |
Accessibility
The component renders an ordered list, keeps the connector decorative, and exposes the timeline label through aria-label. Use onClick only when an event is actionable; otherwise keep items informational. Status is visual context, so include the same state in the title or description when it matters.