Timeline widget
Events or steps on a vertical rail. In steps, the rail is solid up to the current step and quiet after it, so progress reads without color.
On this page
An incident chronology, and a migration plan whose rail fills up to the current step.
Installation
Usage
import { TimelineWidget } from "@/components/ui/chatcn/timeline-widget"
<TimelineWidget
title="Incident 2291: checkout errors"
items={[{ id: "1", time: "09:12", title: "Error rate on /checkout passes 2%" }, ...]}
/>Items with the same group render under one heading, such as a day in an itinerary.
Props
| Prop | Type | Notes |
|---|---|---|
items | TimelineItem[] | id, title, time?, description?, meta?, status?, group? |
variant | "events" | "steps" | Steps use done, current, upcoming, skipped |
expectedCount, loading, streaming | Reserved rows | |
card | boolean | Default true |
Accessibility
- An ordered list. The current step has
aria-current="step", and every step reads its status in words.
Motion
- Items that stream in rise 4 px once. A finished timeline appears at once.