A vertical timeline of events with icon nodes, a connecting line that draws in, relative timestamps and expandable details.
npx shadcn@latest add https://hyperblur.dev/r/list-timeline-vertical.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/list-timeline-vertical.tsx.
import { ListTimelineVertical } from "@/components/hyperblur/list-timeline-vertical"
<ListTimelineVertical defaultOpen={["delivery"]} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id: string; title: string; time: string; icon?: TimelineIconName; tone?: "done" | "active" | "pending"; description?: string; details?: ReactNode }[] | an order tracking example | Events from first to last. Items with details get a toggle. Time is shown as given, for example 2 hours ago. |
| open | string[] | Controlled list of expanded item ids. Pair with onOpenChange. | |
| defaultOpen | string[] | [] | Items expanded at first when uncontrolled. |
| onOpenChange | (open: string[]) => void | Called whenever an item expands or collapses. | |
| multiple | boolean | false | Allow several items expanded at once. |
| gap | number | 14 | Space between events in pixels. |
| accent | string | "#2f7bff" | Color of done nodes, the connecting line and the active pulse. |