Timeline
Ordered sequence of events with status markers and a connector line
Category: display · WCAG 2.2-AA · timeline, steps, history, progress, events
Variants
- vertical
- horizontal
States
- complete
- current
- upcoming
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | { id: string; title: ReactNode; description?: ReactNode; time?: string; icon?: ReactNode; status?: "complete" | "current" | "upcoming" }[] | — | The items to render. |
orientation | 'vertical' | 'horizontal' | vertical | Layout orientation of the component. |
Design tokens
--cascivo-color-border--cascivo-color-border-strong--cascivo-color-surface--cascivo-color-success--cascivo-color-primary--cascivo-radius-full
When to use
- Showing an ordered sequence of events over time (activity feeds, order tracking)
- Communicating progress through discrete stages with complete/current/upcoming status
- Presenting a chronological history where order is meaningful
When not to use
- Interactive multi-step navigation the user controls — use Tabs or a Stepper
- Unordered lists where sequence carries no meaning — use List
How to build an accessible Timeline in React →
Examples
Vertical timeline with statuses
<Timeline
items={[
{ id: '1', title: 'Order placed', time: '09:00', status: 'complete' },
{ id: '2', title: 'Shipped', time: '12:30', status: 'current' },
{ id: '3', title: 'Delivered', status: 'upcoming' },
]}
/>Related components
- List — List is for unordered prose; Timeline conveys ordered, time-stamped events