{
  "name": "scroll-spy-demo",
  "type": "registry:example",
  "registryDependencies": [
    "scroll-spy"
  ],
  "files": [
    {
      "path": "examples/scroll-spy-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport {\n  ScrollSpy,\n  ScrollSpyLink,\n  ScrollSpyNav,\n  ScrollSpySection,\n  ScrollSpyViewport,\n} from \"@/registry/bases/radix/ui/scroll-spy\";\n\nexport default function ScrollSpyDemo() {\n  const [scrollContainer, setScrollContainer] =\n    React.useState<HTMLDivElement | null>(null);\n\n  return (\n    <ScrollSpy\n      offset={16}\n      scrollContainer={scrollContainer}\n      className=\"h-[400px] w-full border\"\n    >\n      <ScrollSpyNav className=\"w-40 border-r p-4\">\n        <ScrollSpyLink value=\"introduction\">Introduction</ScrollSpyLink>\n        <ScrollSpyLink value=\"getting-started\">Getting Started</ScrollSpyLink>\n        <ScrollSpyLink value=\"usage\">Usage</ScrollSpyLink>\n        <ScrollSpyLink value=\"api-reference\">API Reference</ScrollSpyLink>\n      </ScrollSpyNav>\n      <ScrollSpyViewport\n        ref={setScrollContainer}\n        className=\"overflow-y-auto p-4\"\n      >\n        <ScrollSpySection value=\"introduction\">\n          <h2 className=\"text-2xl font-bold\">Introduction</h2>\n          <p className=\"mt-2 text-muted-foreground\">\n            ScrollSpy automatically updates navigation links based on scroll\n            position.\n          </p>\n          <div className=\"mt-4 h-64 rounded-lg bg-accent\" />\n        </ScrollSpySection>\n        <ScrollSpySection value=\"getting-started\">\n          <h2 className=\"text-2xl font-bold\">Getting Started</h2>\n          <p className=\"mt-2 text-muted-foreground\">\n            Install the component using the CLI or copy the source code.\n          </p>\n          <div className=\"mt-4 h-64 rounded-lg bg-accent\" />\n        </ScrollSpySection>\n        <ScrollSpySection value=\"usage\">\n          <h2 className=\"text-2xl font-bold\">Usage</h2>\n          <p className=\"mt-2 text-muted-foreground\">\n            Use the Provider, Root, Link, and Section components to create your\n            scroll spy navigation.\n          </p>\n          <div className=\"mt-4 h-64 rounded-lg bg-accent\" />\n        </ScrollSpySection>\n        <ScrollSpySection value=\"api-reference\">\n          <h2 className=\"text-2xl font-bold\">API Reference</h2>\n          <p className=\"mt-2 text-muted-foreground\">\n            Complete API documentation for all ScrollSpy components.\n          </p>\n          <div className=\"mt-4 h-64 rounded-lg bg-accent\" />\n        </ScrollSpySection>\n      </ScrollSpyViewport>\n    </ScrollSpy>\n  );\n}\n",
      "target": ""
    }
  ]
}