{
  "name": "tour-demo",
  "type": "registry:example",
  "dependencies": [
    "radix-ui",
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "tour"
  ],
  "files": [
    {
      "path": "examples/tour-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport {\n  Tour,\n  TourArrow,\n  TourClose,\n  TourDescription,\n  TourFooter,\n  TourHeader,\n  TourNext,\n  TourPortal,\n  TourPrev,\n  TourSpotlight,\n  TourSpotlightRing,\n  TourStep,\n  TourStepCounter,\n  TourTitle,\n} from \"@/registry/bases/radix/ui/tour\";\n\nexport default function TourDemo() {\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <div className=\"flex min-h-[400px] flex-col items-center justify-center gap-8 p-8\">\n      <div className=\"flex flex-col items-center gap-4\">\n        <div className=\"flex flex-col items-center gap-1\">\n          <h1 id=\"welcome-title\" className=\"text-2xl font-bold\">\n            Welcome to Your Dashboard\n          </h1>\n          <p className=\"text-center text-muted-foreground\">\n            Take a quick tour to explore key features\n          </p>\n        </div>\n        <Button id=\"start-tour-btn\" onClick={() => setOpen(true)}>\n          Start Tour\n        </Button>\n      </div>\n      <div className=\"grid grid-cols-3 gap-4\">\n        <div id=\"feature-1\" className=\"rounded-lg border p-4 text-center\">\n          <h3 className=\"font-semibold\">Analytics</h3>\n          <p className=\"text-sm text-muted-foreground\">\n            Track your performance metrics\n          </p>\n        </div>\n        <div id=\"feature-2\" className=\"rounded-lg border p-4 text-center\">\n          <h3 className=\"font-semibold\">Projects</h3>\n          <p className=\"text-sm text-muted-foreground\">\n            Manage your active projects\n          </p>\n        </div>\n        <div id=\"feature-3\" className=\"rounded-lg border p-4 text-center\">\n          <h3 className=\"font-semibold\">Team</h3>\n          <p className=\"text-sm text-muted-foreground\">\n            Collaborate with teammates\n          </p>\n        </div>\n      </div>\n      <Tour\n        open={open}\n        onOpenChange={setOpen}\n        stepFooter={\n          <TourFooter>\n            <div className=\"flex w-full items-center justify-between\">\n              <TourStepCounter />\n              <div className=\"flex gap-2\">\n                <TourPrev />\n                <TourNext />\n              </div>\n            </div>\n          </TourFooter>\n        }\n      >\n        <TourPortal>\n          <TourSpotlight />\n          <TourSpotlightRing />\n          <TourStep target=\"#welcome-title\" side=\"bottom\" align=\"center\">\n            <TourHeader>\n              <TourTitle>Welcome!</TourTitle>\n              <TourDescription>\n                Let's walk through the main features of your dashboard in just a\n                few steps.\n              </TourDescription>\n            </TourHeader>\n            <TourClose />\n          </TourStep>\n          <TourStep target=\"#feature-1\" side=\"top\" align=\"center\">\n            <TourArrow />\n            <TourHeader>\n              <TourTitle>Analytics Dashboard</TourTitle>\n              <TourDescription>\n                View real-time insights, track KPIs, and monitor your team's\n                progress with interactive charts.\n              </TourDescription>\n            </TourHeader>\n            <TourClose />\n          </TourStep>\n          <TourStep target=\"#feature-2\" side=\"top\" align=\"center\">\n            <TourArrow />\n            <TourHeader>\n              <TourTitle>Project Management</TourTitle>\n              <TourDescription>\n                Create, organize, and track projects with powerful tools for\n                task management and deadlines.\n              </TourDescription>\n            </TourHeader>\n            <TourClose />\n          </TourStep>\n          <TourStep target=\"#feature-3\" side=\"top\" align=\"center\" required>\n            <TourArrow />\n            <TourHeader>\n              <TourTitle>Team Collaboration</TourTitle>\n              <TourDescription>\n                Invite members, assign roles, and collaborate seamlessly. This\n                step is required to continue.\n              </TourDescription>\n            </TourHeader>\n            <TourClose />\n          </TourStep>\n        </TourPortal>\n      </Tour>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}