Data Display

Timeline

Displays a vertical sequence of events with status indicators.

Order placed

10:00 AM

Payment confirmed

10:05 AM

Preparing shipment

11:30 AM

Out for delivery

—

Delivered

—

Installation

npx benflux-ui add timeline

Usage

import { Timeline } from "@/components/ui/timeline"

const events = [
  { label: "Order placed", description: "10:00 AM", status: "completed" },
  { label: "Processing", description: "10:05 AM", status: "active" },
  { label: "Shipped", description: "—", status: "pending" },
]

<Timeline items={events} />