{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-progress-demo",
  "title": "Scroll Progress: Article progress",
  "description": "Tracks a scrolling article.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.cuelark.com/r/scroll-progress.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/examples/scroll-progress-demo.tsx",
      "content": "import * as React from \"react\";\n\nimport { ScrollProgress } from \"@/registry/cuelark/ui/scroll-progress\";\n\nexport default function ScrollProgressDemo() {\n  const [box, setBox] = React.useState<HTMLDivElement | null>(null);\n  return (\n    <div ref={setBox} className=\"relative h-64 w-full max-w-md overflow-y-auto rounded-xl border border-border bg-card\">\n      <div className=\"sticky top-0 z-10 bg-card/90 px-5 pt-4 pb-3 backdrop-blur\">\n        <span className=\"cue-label\">Reading · 4 min</span>\n        {box && <ScrollProgress position=\"static\" scroller={box} className=\"mt-3\" />}\n      </div>\n      <div className=\"grid gap-4 px-5 pb-5 text-sm text-muted-foreground\">\n        {Array.from({ length: 8 }, (_, i) => (\n          <p key={i}>\n            Paragraph {i + 1}. On a real page, drop ScrollProgress at the top of the layout with no target and it tracks the whole document; give it a target to follow a single\n            article instead.\n          </p>\n        ))}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "scroll-progress",
    "example"
  ],
  "type": "registry:component"
}