Feedback

Timeline

A vertical or horizontal sequence of status-colored events with a connecting line — order tracking, deployment history, or any event log.

Timeline

Preview

Vertical (default)

Order placedJan 5, 9:00 AM
Payment confirmedJan 5, 9:05 AM
Preparing shipmentJan 6, 2:30 PM
Item is being packed at the warehouse.
Delivery delayedJan 7, 8:00 AM
Weather conditions have delayed the carrier.

Horizontal

Created
Reviewed
Deployed

Usage

tsx

import { Timeline } from "@vesture/react";

<Timeline
  items={[
    { id: "1", title: "Order placed", timestamp: "Jan 5, 9:00 AM", status: "success" },
    { id: "2", title: "Preparing shipment", timestamp: "Jan 6, 2:30 PM", status: "warning" },
    { id: "3", title: "Delivery delayed", description: "Weather delay from the carrier.", status: "danger" },
  ]}
/>

Behavior

Content sits on one fixed side of each marker (right of it in vertical orientation, below it in horizontal) rather than alternating left/right — simpler to scan as a chronological list.
Each item's marker is colored by status using the same success/warning/danger tokens as Alert and Badge; a status-less item falls back to a neutral textMuted color rather than the primary accent, so an unstated status doesn't read as "highlighted".
icon replaces the plain dot marker for that item when provided — useful for a per-step icon (cart, payment, shipped) instead of a uniform dot.
The connecting line is omitted after the last item — it only runs between items, not past the final one.

Props

TimelineItem

Prop	Type	Default	Description
id	string	—	Required.
title	string	—	Required.
description	string	—	Supporting copy below the title.
timestamp	string	—	Rendered next to the title — pass it pre-formatted.
icon	ReactNode	—	Replaces the default dot marker for this item.
status	"default" \| "success" \| "warning" \| "danger"	"default"	Colors the marker.

TimelineProps

Prop	Type	Default	Description
items	TimelineItem[]	—	Required.
orientation	"vertical" \| "horizontal"	"vertical"	Vertical stacks items top-to-bottom; horizontal lays them out left-to-right with the content below each marker.