Carregando…Carregando…Carregando…Carregando…Vertical timeline with 5 statuses, 3 variants, timestamps, actions and scroll/scroll-progress/progress/activity modes.
$ npx kikitocn add timeline@/lib/utilsmotionimport { Timeline } from "@/components/ui/cn/timeline/Timeline";
export function TimelineExample() {
return (
<Timeline variant="default" />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
items* | TimelineItem[] | TimelineScrollProgressEntry[] | — | Lista de eventos: { title, description?, timestamp?, status?, icon?, actions? } (ou { title, content } quando variant='scroll-progress') |
variant | 'default' | 'compact' | 'reverse' | 'scroll' | 'scroll-progress' | 'progress' | 'activity' | 'default' | Estilo visual/família — ver lista de variantes acima |
lastLine | boolean | false | Exibe linha após o último item (família default/compact/reverse) |
heading | React.ReactNode | undefined | Título opcional acima da lista (só variant='scroll-progress') |
description | React.ReactNode | undefined | Texto opcional abaixo do título (só variant='scroll-progress') |
Timeline — status icons and connectors
role a página pra ver a linha se desenhar
Uma linha do tempo que se desenha conforme você rola.
Lançamento do Kikito CN — primeiros 20 componentes publicados via `npx kikitocn add`.
Migração pra tokens semânticos próprios (patina/kinpaku) e auditoria dos 9 gates.
Adaptação da biblioteca Aceternity UI pro vocabulário do design system.
Alternating layout
Vertical timeline progress
Account created
Jan 15, 2024
Email verified
Jan 15, 2024
Profile setup
In progress…
First project
Pending
Invite team
Pending
With failed step
Account created
Jan 15, 2024
Payment failed
Card declined
Profile setup
In progress…
First project
Pending
Invite team
Pending
Activity Feed — chronological list with intents and timestamps
Alice commented on your post
Build #142 passed successfully
Payment of $249 received
Disk usage exceeded 90%
Bob left the workspace