Interactive Timeline
A developer-focused milestone and deployment timeline featuring dynamic progress lines, pulsating status nodes, expandable telemetry cards, and commit hash copy.
Build & Tree-Shaking VerificationCI/CDcompleted
10:42 AM · 48sGlobal Edge Layer ReplicationInfrain-progress
10:43 AM · In ProgressReplicating immutable build layers across 32 regional edge locations worldwide.
Active Edge Nodes28 / 32
Edge Latency12 ms
Infra Bot(Automated)
Synthetic Canary Smoke SuiteQApending
Pending · 120s estAtomic DNS Traffic CutoverDNSpending
PendingInstallation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/interactive-timeline
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| items | TimelineItem[] | [] | Array of timeline step items |
| defaultSelectedId | string | items[0]?.id | ID of the item initially expanded |
| collapsible | boolean | true | Whether cards can be expanded/collapsed on click |
| onItemSelect | (item: TimelineItem) => void | undefined | Callback invoked when a timeline node or card is selected |
| className | string | undefined | Optional CSS classes for outer container |