Data/Timeline
Timeline
A vertical list of events with status indicators. Use for activity feeds, changelogs, onboarding steps, or order tracking.
import { Timeline } from "@animui/ui"Basic
Project created
Repository initialized.
Design review
Mockups approved.
- 3
Development
Building core features.
- 4
QA testing
Timeline Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | TimelineItem[] | — | Array of timeline events. |
className | string | — | Additional classes for the wrapper. |
TimelineItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | number | — | Unique identifier for the item. |
title | string | — | Main label for this event. |
description | string | — | Secondary text shown below the title. |
time | string | — | Timestamp or relative time label. |
status | "completed" | "active" | "pending" | "pending" | Controls the dot color and visual treatment. |
icon | React.ReactNode | — | Optional icon inside the dot. |