An ordered activity trail with dates, details and completed markers.
Project created
A new home for your ideas.
Team invited
Three collaborators joined.
First review
Feedback is taking shape.
pnpm dlx shadcn@latest add @latheui/timelinePart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Timeline is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
| Prop | Type | Default | Description |
|---|---|---|---|
| animate | boolean | true | Fade each row into view in order. Reduced motion shows rows immediately. |
| stagger | number | 320 | Milliseconds between row entrances. |
| autoComplete | boolean | false | Start every marker unchecked, then animate each to a white background and check. Preview pause and restart control the sequence. |
| items* (required) | TimelineItem[] | — | Stable ids, titles, visible dates, optional ISO dates, descriptions and completion states. |
Combine the control with your own layout. Semantic colors follow the active theme.
import { Timeline } from "@/components/ui/timeline"
export default function Demo(){return <Timeline autoComplete className="w-full max-w-sm" items={[{id:"1",title:"Project created",date:"Oct 10",dateTime:"2026-10-10",description:"A new home for your ideas.",complete:false},{id:"2",title:"Team invited",date:"Oct 11",dateTime:"2026-10-11",description:"Three collaborators joined.",complete:false},{id:"3",title:"First review",date:"Today",dateTime:"2026-10-12",description:"Feedback is taking shape."}]}/>}