{
  "name": "scroll-spy-vertical-demo",
  "type": "registry:example",
  "registryDependencies": [
    "scroll-spy"
  ],
  "files": [
    {
      "path": "examples/scroll-spy-vertical-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 ScrollSpyVerticalDemo() {\n  const [scrollContainer, setScrollContainer] =\n    React.useState<HTMLDivElement | null>(null);\n\n  return (\n    <ScrollSpy\n      offset={10}\n      orientation=\"vertical\"\n      scrollContainer={scrollContainer}\n      className=\"h-[400px] w-full border\"\n    >\n      <ScrollSpyNav className=\"border-b p-4\">\n        <ScrollSpyLink value=\"overview\">Overview</ScrollSpyLink>\n        <ScrollSpyLink value=\"features\">Features</ScrollSpyLink>\n        <ScrollSpyLink value=\"installation\">Installation</ScrollSpyLink>\n        <ScrollSpyLink value=\"examples\">Examples</ScrollSpyLink>\n        <ScrollSpyLink value=\"api\">API</ScrollSpyLink>\n      </ScrollSpyNav>\n\n      <ScrollSpyViewport\n        ref={setScrollContainer}\n        className=\"overflow-y-auto p-4\"\n      >\n        <ScrollSpySection value=\"overview\" className=\"min-w-[400px]\">\n          <h2 className=\"text-2xl font-bold\">Overview</h2>\n          <p className=\"mt-2 text-muted-foreground\">\n            ScrollSpy with horizontal orientation for side-scrolling content.\n          </p>\n          <div className=\"mt-4 h-64 rounded-lg bg-accent\" />\n        </ScrollSpySection>\n\n        <ScrollSpySection value=\"features\" className=\"min-w-[400px]\">\n          <h2 className=\"text-2xl font-bold\">Features</h2>\n          <p className=\"mt-2 text-muted-foreground\">\n            All the features available in this component.\n          </p>\n          <div className=\"mt-4 h-64 rounded-lg bg-accent\" />\n        </ScrollSpySection>\n\n        <ScrollSpySection value=\"installation\" className=\"min-w-[400px]\">\n          <h2 className=\"text-2xl font-bold\">Installation</h2>\n          <p className=\"mt-2 text-muted-foreground\">\n            How to install and set up the component.\n          </p>\n          <div className=\"mt-4 h-64 rounded-lg bg-accent\" />\n        </ScrollSpySection>\n\n        <ScrollSpySection value=\"examples\" className=\"min-w-[400px]\">\n          <h2 className=\"text-2xl font-bold\">Examples</h2>\n          <p className=\"mt-2 text-muted-foreground\">\n            Various examples showing different use cases.\n          </p>\n          <div className=\"mt-4 h-64 rounded-lg bg-accent\" />\n        </ScrollSpySection>\n\n        <ScrollSpySection value=\"api\" className=\"min-w-[400px]\">\n          <h2 className=\"text-2xl font-bold\">API Reference</h2>\n          <p className=\"mt-2 text-muted-foreground\">\n            Complete API documentation for all components.\n          </p>\n          <div className=\"mt-4 h-64 rounded-lg bg-accent\" />\n        </ScrollSpySection>\n      </ScrollSpyViewport>\n    </ScrollSpy>\n  );\n}\n",
      "target": ""
    }
  ]
}