{
  "name": "timeline-custom-dot-demo",
  "type": "registry:example",
  "files": [
    {
      "path": "examples/timeline-custom-dot-demo.tsx",
      "type": "registry:example",
      "content": "import { Code, Layers, Rocket } from \"lucide-react\";\n\nimport {\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: \"project-kickoff\",\n    dateTime: \"2025-01-15\",\n    date: \"January 15, 2025\",\n    title: \"Project Kickoff\",\n    description: \"Initial meeting to define scope.\",\n    icon: Rocket,\n  },\n  {\n    id: \"design-phase\",\n    dateTime: \"2025-02-01\",\n    date: \"February 1, 2025\",\n    title: \"Design Phase\",\n    description: \"Created wireframes and mockups.\",\n    icon: Layers,\n  },\n  {\n    id: \"development\",\n    dateTime: \"2025-03-01\",\n    date: \"March 1, 2025\",\n    title: \"Development\",\n    description: \"Building core features.\",\n    icon: Code,\n  },\n];\n\nexport default function TimelineCustomDotDemo() {\n  return (\n    <Timeline activeIndex={1} className=\"[--timeline-dot-size:2rem]\">\n      {timelineItems.map((item) => (\n        <TimelineItem key={item.id}>\n          <TimelineDot>\n            <item.icon className=\"size-3.5\" />\n          </TimelineDot>\n          <TimelineConnector />\n          <TimelineContent>\n            <TimelineHeader>\n              <TimelineTime dateTime={item.dateTime}>{item.date}</TimelineTime>\n              <TimelineTitle>{item.title}</TimelineTitle>\n            </TimelineHeader>\n            <TimelineDescription>{item.description}</TimelineDescription>\n          </TimelineContent>\n        </TimelineItem>\n      ))}\n    </Timeline>\n  );\n}\n",
      "target": ""
    }
  ]
}