Skip to content
Core ElementsFree

Timeline

A vertical sequence of dated, dot-connected events.

Usage

Order placed

10:02 AM

Shipped

2:15 PM

Installation

bash
npm install @wunderui/react

Then import what you need:

tsx
import {
  Timeline,
  TimelineEvent,
  TimelineEventProps,
  TimelineItem,
} from "@wunderui/react"

Examples

Timeline

Coloured dots with a title, description and time.

Invoice #4021 paid

2 min ago

WunderUI GmbH · €24,800

New member joined

1 h ago

Mira Lindqvist accepted the invite

Deploy failed

Yesterday

checkout-v3 · rate limit

In context

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Order tracking

Every step of a delivery, newest at the bottom.

Order #20418
Arrives Thursday, 25 September

Order placed

Mon 10:02

3 items · €128.40

Shipped

Tue 16:40

DHL · 00340434161234567

Out for delivery

Today 08:15

Your courier is on the way