Timeline

Displays an ordered sequence of timestamped events on a vertical time axis.

Examples

Shipping History

1. Jul 14, 2026, 5:28 PM

   Order placed

   We received order #SIL-1048 and sent a confirmation email.

2. Jul 15, 2026, 10:10 PM

   Package shipped

   The carrier picked up the package in Oakland, California.

3. Jul 17, 2026, 6:05 PM

   Delivered

   The package was left at the front door.

<Timeline items={shippingItems} timestampFormat="auto" />

Audit Log

1. Jul 17, 2026, 4:02 PM

   Record created

   Morgan created this customer record.
2. Jul 17, 2026, 4:47 PM

   Owner changed

   The owner changed from Morgan to Taylor.
3. Jul 17, 2026, 6:12 PM

   Note added

   Taylor added a follow-up note.

<Timeline items={auditItems} timestampFormat="auto" />

With End Content

1. Jul 17, 2026, 4:02 PM

   Appointment #1

   Completed

   Annual physical with Dr. Rivera.
2. Jul 24, 2026, 6:30 PM

   Appointment #2

   Confirmed

   Lab review with Dr. Chen.
3. Aug 3, 2026, 9:00 PM

   Appointment #3: Post-operative follow-up

   Pending

   Confirmation is still required.

<Timeline items={appointmentItems} timestampFormat="auto" />

API

Timeline

Displays an ordered sequence of timestamped events on a vertical time axis.

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the ordered list.
data-testid	string	—	Test ID applied to the ordered list.
items*	TimelineItemConfig[]	—	Timeline entries, rendered in the supplied order.
ref	Ref<HTMLOListElement>	—	Ref forwarded to the ordered list.
style	CSSProperties	—	Inline styles applied to the ordered list.
timestampFormat	"auto" | "time" | "date" | "dateTime" | "relative" | "isoDate" | "isoTime" | "isoDateTime"	'auto'	How to format every entry's timestamp.