labsUITimeline
Server-safe ordered list of events on a rail: icon or dot markers with status colors, machine-readable <time>, title and an optional body. For changelogs, experience and mod logs.
v0.3 released
Table, Input OTP, Timeline, Spinner and Aspect ratio.Merged #128
Command palette keyword matching.Rate limit raised
- Sep 30, 2026
v0.2 tagged
- Sep 2, 2026
Project started
import { GitMerge, Rocket } from "lucide-react";import { Timeline, TimelineItem } from "@/components/ui/timeline";export function Changelog() { return ( <Timeline> <TimelineItem icon={<Rocket />} variant="active" time="Oct 21, 2026" dateTime="2026-10-21" title="v0.3 released" > Table, Input OTP, Timeline, Spinner and Aspect ratio. </TimelineItem> <TimelineItem icon={<GitMerge />} time="Oct 18, 2026" dateTime="2026-10-18" title="Merged #128" /> <TimelineItem time="Sep 2, 2026" title="Project started" /> </Timeline> );}<Timeline>
Ordered list of events, newest or oldest first; the order is yours.
Also accepts every <ol> prop (none of its own).
<TimelineItem>
One event: marker on the rail, then time, title and optional body (children).
title*ReactNodeEvent headline.
dateTimestringMachine-readable date for
<time>, e.g. "2026-10-21".iconReactNodeIcon inside the marker; without one the marker is a small dot.
timeReactNodeShown above the title. Pair with
dateTimeto render a machine-readable <time>.variantdefault"default""default" | "active" | "success" | "warning" | "destructive"Marker color.
| Prop | Type | Default |
|---|---|---|
title*Event headline. | ReactNode | — |
dateTimeMachine-readable date for | string | — |
iconIcon inside the marker; without one the marker is a small dot. | ReactNode | — |
timeShown above the title. Pair with | ReactNode | — |
variantMarker color. | "default" | "active" | "success" | "warning" | "destructive" | "default" |
Also accepts every <li> prop.
* required. Every component also takes className.