Timeline

import {
  Timeline,
  TimelineHeader,
  TimelineIndicator,
  TimelineItem,
  TimelineSeparator,
  TimelineTitle,
} from '@/registry/components/timeline';

<Timeline defaultValue={3}>
  {items.map((item) => (
    <TimelineItem key={item.id} step={item.id}>
      <TimelineHeader>
        <TimelineSeparator />
        <TimelineTitle className="-mt-0.5">{item.title}</TimelineTitle>
        <TimelineIndicator />
      </TimelineHeader>
    </TimelineItem>
  ))}
</Timeline>