{
  "name": "timeline-horizontal-demo",
  "type": "registry:example",
  "registryDependencies": [
    "timeline"
  ],
  "files": [
    {
      "path": "examples/timeline-horizontal-demo.tsx",
      "type": "registry:example",
      "content": "import {\n  Timeline,\n  TimelineConnector,\n  TimelineContent,\n  TimelineDescription,\n  TimelineDot,\n  TimelineHeader,\n  TimelineItem,\n  TimelineTime,\n  TimelineTitle,\n} from \"@/registry/bases/radix/ui/timeline\";\n\nconst timelineItems = [\n  {\n    id: \"research-and-planning\",\n    dateTime: \"2025-01\",\n    date: \"Jan - Mar\",\n    title: \"Q1\",\n    description: \"Research and planning\",\n  },\n  {\n    id: \"development-sprint\",\n    dateTime: \"2025-04\",\n    date: \"Apr - Jun\",\n    title: \"Q2\",\n    description: \"Development sprint\",\n  },\n  {\n    id: \"beta-launch\",\n    dateTime: \"2025-07\",\n    date: \"Jul - Sep\",\n    title: \"Q3\",\n    description: \"Beta launch\",\n  },\n];\n\nexport default function TimelineHorizontalDemo() {\n  return (\n    <Timeline orientation=\"horizontal\" activeIndex={1}>\n      {timelineItems.map((item) => (\n        <TimelineItem key={item.id}>\n          <TimelineDot />\n          <TimelineConnector />\n          <TimelineContent>\n            <TimelineHeader>\n              <TimelineTitle>{item.title}</TimelineTitle>\n              <TimelineTime dateTime={item.dateTime}>{item.date}</TimelineTime>\n            </TimelineHeader>\n            <TimelineDescription>{item.description}</TimelineDescription>\n          </TimelineContent>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  );\n}\n",
      "target": ""
    }
  ]
}