Timeline
An ordered list of events on a rail. Content, the opposite side, the marker, and the connector are all render props receiving the item and its index, so events can be as plain as a line of text or as rich as a card. The rail runs vertically or horizontally, and content can sit on either side or alternate so the rail centres itself.
Report ordered
VIN 1HGCM82633A004352 submitted.
VIN decoded
2003 Honda Accord EX matched.
History retrieved
Two previous owners, no accidents.
Report ready
Delivered to the requesting account.
Installation
Import from the package. Do not run shadcn add in your app.
tsx
import { Timeline } from "@carsxe/design-system/components/timeline"Usage
tsx
import { Timeline } from "@carsxe/design-system/components/timeline"
<Timeline
items={events}
content={(event) => <p className="font-medium">{event.title}</p>}
/>Opposite content
- 09:14
Report ordered
- 09:15
VIN decoded
- 09:16
History retrieved
- 09:17
Report ready
Alternating
- 09:14
Report ordered
VIN 1HGCM82633A004352 submitted.
- 09:15
VIN decoded
2003 Honda Accord EX matched.
- 09:16
History retrieved
Two previous owners, no accidents.
- 09:17
Report ready
Delivered to the requesting account.
Content on the other side
Report ordered
VIN decoded
History retrieved
Report ready
Custom markers and cards
- Report ordered09:14
- VIN decoded09:15
- History retrieved09:16
- Report ready09:17
Horizontal
- 09:14
Report ordered
- 09:15
VIN decoded
- 09:16
History retrieved
- 09:17
Report ready
API Reference
| Prop | Type | Default |
|---|---|---|
| items | readonly T[] | — |
| orientation | "vertical" | "horizontal" | "vertical" |
| align | "start" | "end" | "alternate" | "start" |
| content | (item: T, index: number) => ReactNode | — |
| opposite | (item: T, index: number) => ReactNode | — |
| marker | (item: T, index: number) => ReactNode | — |
| connector | (item: T, index: number) => ReactNode | — |
| getKey | (item: T, index: number) => Key | item.id ?? index |