Timeline
Vertical chronological list of events with variants and custom icons.
Live Demo
With variants
Project kickoff
Initial planning and team assembly.
Design phase complete
Wireframes and design system finalized.
Deployment warning
Memory usage exceeded threshold.
Critical bug found
Data sync issue in production.
v1.0 released
With icons
- 🛒
Order placed
- 💳
Payment confirmed
- 📦
Shipped
- ✅
Delivered
Item Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | Event title |
description | ReactNode | — | Optional event description |
date | ReactNode | — | Optional date/time label |
icon | ReactNode | — | Optional icon inside the dot |
variant | "default" | "success" | "warning" | "error" | "info" | "default" | Color variant: default | success | warning | error | info |
Usage
import { Timeline } from '@ghiberti85/ui'
<Timeline
items={[
{
title: 'Project started',
date: 'Jan 2024',
description: 'Initial planning phase.',
variant: 'success',
},
{
title: 'Beta launched',
date: 'Mar 2024',
icon: '🚀',
variant: 'info',
},
{
title: 'v1.0 released',
date: 'Jun 2024',
variant: 'success',
},
]}
/>