Core ElementsFree

Timeline

A vertical sequence of dated, dot-connected events.

Usage

Order placed

10:02 AM

Shipped

2:15 PM

bash

npx wunderui-cli add timeline

Writes the source into your project with its dependencies and, on first use, the styles — see Installation.

Then import what you need:

tsx

import { Timeline, TimelineItem } from "@/components/wunderui/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

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

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