Timeline
Lista cronológica vertical de eventos com variantes e ícones personalizados.
Demonstração
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 | Tipo | Padrão | Descrição |
|---|---|---|---|
title | ReactNode | — | Título do evento |
description | ReactNode | — | Descrição opcional do evento |
date | ReactNode | — | Label opcional de data/hora |
icon | ReactNode | — | Ícone opcional dentro do ponto |
variant | "default" | "success" | "warning" | "error" | "info" | "default" | Variante de cor: default | success | warning | error | info |
Uso
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',
},
]}
/>