{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-timeline-8","type":"registry:block","title":"Vertical timeline","description":"Vertical timeline","dependencies":[],"registryDependencies":["@reui/timeline"],"files":[{"path":"c-timeline-8.tsx","type":"registry:block","content":"import {\n  Timeline,\n  TimelineContent,\n  TimelineDate,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n} from \"@/components/reui/timeline\"\n\nconst releaseCycle = [\n  {\n    id: 1,\n    date: \"Week 1\",\n    title: \"Planning\",\n    description: \"Scope definition and resource planning.\",\n  },\n  {\n    id: 2,\n    date: \"Week 2\",\n    title: \"Design\",\n    description: \"UI/UX design and prototyping.\",\n  },\n  {\n    id: 3,\n    date: \"Week 4\",\n    title: \"Development\",\n    description: \"Core features implementation.\",\n  },\n]\n\nexport function Pattern() {\n  return (\n    <Timeline\n      defaultValue={2}\n      orientation=\"horizontal\"\n      className=\"w-full max-w-xl\"\n    >\n      {releaseCycle.map((item) => (\n        <TimelineItem key={item.id} step={item.id}>\n          <TimelineHeader>\n            <TimelineSeparator />\n            <TimelineDate>{item.date}</TimelineDate>\n            <TimelineTitle>{item.title}</TimelineTitle>\n            <TimelineIndicator />\n          </TimelineHeader>\n          <TimelineContent>{item.description}</TimelineContent>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  )\n}","target":"components/examples/c-timeline-8.tsx"}],"meta":{"order":8,"gridSize":1}}