{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-progress-bar-02",
  "type": "registry:component",
  "title": "Scroll Progress Bar",
  "author": "Toby Belhome",
  "description": "The scroll progress bar adds a dynamic, interactive scrolling indicator, built with Motion and Tailwind CSS, enhancing user experience with smooth transitions.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "http://localhost:3000/r/scroll-progress-bar.json"
  ],
  "files": [
    {
      "path": "examples/motion/components/scroll-progress-bar/02/page.tsx",
      "content": "import ScrollProgressBar from \"../scroll-progress-bar\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\n\nexport default function ScrollProgressBarExample() {\n  return (\n    <>\n      <ScrollProgressBar type=\"circle\" />\n      <div>\n        <div className=\"flex h-screen items-center justify-center gap-2 text-xl\">\n          Scroll <ChevronDownIcon />\n        </div>\n        <div className=\"flex h-screen items-center justify-center gap-2 text-xl\">\n          Scroll <ChevronDownIcon />\n        </div>\n        <div className=\"flex h-screen items-center justify-center gap-2 text-xl\">\n          Scroll <ChevronUpIcon />\n        </div>\n      </div>\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/scroll-progress-bar-02.tsx"
    }
  ],
  "meta": {
    "isPro": false
  }
}