Timelinedata-display
Vertical event list with done, current, upcoming, warning and error states, localized time, meta and trailing slots and connector lines.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/timelineDefault
timeline-demo.tsx
import { StatusBadge } from "@/components/ui/status-badge";import { Timeline, TimelineItem } from "@/components/ui/timeline";
export default function TimelineDemo() { return ( <Timeline className="max-w-md"> <TimelineItem state="done" title="Order placed" time={new Date("2026-11-03T09:30:00Z")} meta="Web checkout" trailing="$128.00" /> <TimelineItem state="done" title="Payment captured" time={new Date("2026-11-03T09:31:00Z")} /> <TimelineItem state="current" title="Packing" time={new Date("2026-11-04T08:00:00Z")} trailing={<StatusBadge tone="info">In progress</StatusBadge>} /> <TimelineItem state="upcoming" title="Shipped" /> </Timeline> );}