Timeline
Renders a vertical timeline as a series of bullet-connected event items. Items at or before active receive the active state (colored bullet). Each item accepts an optional title, description, custom bullet content, and per-item color override.
Basic
Project started
Initial commit pushed to repository
First release
v0.1.0 published to npm
Community feedback
First GitHub stars and issues
v1.0 launch
Stable API announced
<Timeline
active={1}
items={[
{ title: 'Project started', description: 'Initial commit pushed' },
{ title: 'First release', description: 'v0.1.0 published' },
{ title: 'Community feedback', description: 'First GitHub stars' },
{ title: 'v1.0 launch', description: 'Stable API announced' },
]}
/>All active
Project started
Initial commit pushed to repository
First release
v0.1.0 published to npm
Community feedback
First GitHub stars and issues
v1.0 launch
Stable API announced
<Timeline active={10} items={events} color="green" />Custom bullets
💡
Idea
The spark
🔨
Build
Ship it
🚀
Launch
Go live!
📈
Grow
Scale up
<Timeline
active={2}
items={[
{ title: 'Idea', description: 'The spark', bullet: '💡' },
{ title: 'Build', description: 'Ship it', bullet: '🔨' },
{ title: 'Launch', description: 'Go live!', bullet: '🚀' },
]}
bulletSize="xl"
/>Line variants
Solid line
Default
Dashed line
dashed variant
Dotted line
dotted variant
End
No line here
<Timeline
active={1}
items={[
{ title: 'Solid', lineVariant: 'solid' },
{ title: 'Dashed', lineVariant: 'dashed' },
{ title: 'Dotted', lineVariant: 'dotted' },
]}
/>Timeline Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | TimelineItemDef[] | — | Ordered list of event definitions (required) |
active | number | -1 | 0-based index of the last active item |
align | 'left'|'right' | 'left' | Side where item content is placed |
bulletSize | 'xs'|'sm'|'md'|'lg'|'xl'|number|string | — | Size of the bullet circles |
lineWidth | number | — | Width of the connector line in pixels |
color | string | — | Default accent color for all bullet circles |
radius | 'xs'|'sm'|'md'|'lg'|'xl'|string | — | Border radius of each bullet circle |
class | string | — | Additional CSS class names |
style | object | — | Inline styles |
TimelineItemDef fields
| Field | Type | Description |
|---|---|---|
title | ReactNode | Heading text beside the bullet |
description | ReactNode | Secondary content beneath the title |
bullet | ReactNode | Custom content inside the bullet circle |
lineVariant | 'solid'|'dashed'|'dotted' | Stroke style of the connector line below this item |
color | string | Per-item accent color override |