Data

Timeline

Ordered timeline of events with connector lines, colored dot markers, optional icons and vertical, alternating or horizontal layouts.

Import

import { Timeline, TimelineItem } from "@zephora/react";

Examples

Items array

Jan 2026
v1.0 released
First stable release.
Mar 2026
v1.1 in review
DataTable virtualization.
Q4 2026
v2.0 planned
Theming overhaul.

const items: TimelineItemData[] = [
  { title: "v1.0 released", description: "First stable release.", time: "Jan 2026", color: "success" },
  { title: "v1.1 in review", description: "DataTable virtualization.", time: "Mar 2026", color: "primary" },
  { title: "v2.0 planned", description: "Theming overhaul.", time: "Q4 2026", color: "info" },
];

<Timeline items={items} />

Composed children

Use `TimelineItem` children for arbitrary content and per-item colors.

09:12
Order placed
09:13
Payment confirmed
14:40
Out for delivery
Courier: DHL — track #82412
Delivered

<Timeline>
  <TimelineItem title="Order placed" time="09:12" color="success" />
  <TimelineItem title="Payment confirmed" time="09:13" color="success" />
  <TimelineItem title="Out for delivery" time="14:40" color="warning">
    <Text size="sm" muted>Courier: DHL — track #82412</Text>
  </TimelineItem>
  <TimelineItem title="Delivered" color="info" />
</Timeline>

Alternate layout

`alternate` zigzags the items around the axis (vertical orientation only).

Jan 2026
v1.0 released
First stable release.
Mar 2026
v1.1 in review
DataTable virtualization.
Q4 2026
v2.0 planned
Theming overhaul.

<Timeline items={items} alternate />

API

Timeline props

Prop	Type	Default	Description
`items`	`TimelineItemData[]`	—	Items to render (`{ title, description?, time?, icon?, color? }`); alternatively pass `TimelineItem` children.
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	Axis direction.
`alternate`	`boolean`	`false`	Alternate item sides (zigzag). Vertical orientation only.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.

TimelineItem props

Prop	Type	Default	Description
`title`	`ReactNode`	—	Event title.
`description`	`ReactNode`	—	Secondary text under the title.
`time`	`ReactNode`	—	Timestamp rendered above the title.
`icon`	`ReactNode`	—	Custom marker icon rendered inside the dot.
`color`	`"primary" \| "success" \| "warning" \| "danger" \| "info"`	`"primary"`	Dot accent color.
`unstyled`	`boolean`	—	Headless mode — inherits from the parent Timeline by default.