{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-progress-rail",
  "type": "registry:component",
  "title": "Scroll progress rail",
  "description": "A React reading progress bar that fills with page scroll on a spring, with section labels such as intro, product, proof and pricing shown beneath it.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/scroll-progress-rail.tsx",
      "type": "registry:ui",
      "target": "components/ui/scroll-progress-rail.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useScroll, useSpring, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction ScrollProgressRail({\n  labels = [\"Intro\", \"Product\", \"Proof\", \"Pricing\"],\n  className,\n}: {\n  labels?: string[]\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  const { scrollYProgress } = useScroll()\n  const scaleX = useSpring(scrollYProgress, { stiffness: 120, damping: 30, restDelta: 0.001 })\n  return (\n    <div\n      data-slot=\"scroll-progress-rail\"\n      data-tier=\"premium\"\n      className={cn(\"sticky top-0 z-50 border-b border-border bg-raised/90 backdrop-blur-sm\", className)}\n    >\n      <div className=\"relative h-0.5 w-full bg-sunken\">\n        <motion.div\n          className=\"absolute inset-y-0 left-0 origin-left bg-accent\"\n          style={reduce ? { scaleX: 0 } : { scaleX }}\n        />\n      </div>\n      <div className=\"mx-auto flex max-w-5xl justify-between gap-2 px-6 py-2\">\n        {labels.map((l) => (\n          <span key={l} className=\"text-[10px] font-medium tracking-[0.01em] text-fg-muted uppercase\">\n            {l}\n          </span>\n        ))}\n      </div>\n    </div>\n  )\n}\nexport { ScrollProgressRail }\n"
    }
  ]
}