Primitive · CLI
Scroll Progress
Preview
npx shadcn@latest add @atroui/scroll-progressScrollProgress
Scroll the panel — scaleX tracks progress directly (no spring lag).
Reading pane
Section 1. Production mounts fixed at the viewport top and binds scrollYProgress → scaleX. Pass springOptions only if you want a soft settle. Reduced motion hides the bar.
Section 2. Production mounts fixed at the viewport top and binds scrollYProgress → scaleX. Pass springOptions only if you want a soft settle. Reduced motion hides the bar.
Section 3. Production mounts fixed at the viewport top and binds scrollYProgress → scaleX. Pass springOptions only if you want a soft settle. Reduced motion hides the bar.
Section 4. Production mounts fixed at the viewport top and binds scrollYProgress → scaleX. Pass springOptions only if you want a soft settle. Reduced motion hides the bar.
Section 5. Production mounts fixed at the viewport top and binds scrollYProgress → scaleX. Pass springOptions only if you want a soft settle. Reduced motion hides the bar.
Section 6. Production mounts fixed at the viewport top and binds scrollYProgress → scaleX. Pass springOptions only if you want a soft settle. Reduced motion hides the bar.
Section 7. Production mounts fixed at the viewport top and binds scrollYProgress → scaleX. Pass springOptions only if you want a soft settle. Reduced motion hides the bar.
Section 8. Production mounts fixed at the viewport top and binds scrollYProgress → scaleX. Pass springOptions only if you want a soft settle. Reduced motion hides the bar.
Section 9. Production mounts fixed at the viewport top and binds scrollYProgress → scaleX. Pass springOptions only if you want a soft settle. Reduced motion hides the bar.
Section 10. Production mounts fixed at the viewport top and binds scrollYProgress → scaleX. Pass springOptions only if you want a soft settle. Reduced motion hides the bar.
Section 11. Production mounts fixed at the viewport top and binds scrollYProgress → scaleX. Pass springOptions only if you want a soft settle. Reduced motion hides the bar.
Section 12. Production mounts fixed at the viewport top and binds scrollYProgress → scaleX. Pass springOptions only if you want a soft settle. Reduced motion hides the bar.
Installation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/scroll-progressSource lands in your repo. Installation · Registry
Usage
import { ScrollProgress } from "@/components/motion-primitives/scroll-progress"
{/* Production: fixed on viewport — direct scaleX */}
<ScrollProgress className="fixed inset-x-0 top-0 h-0.5 bg-brand" />
{/* Opt-in soft spring */}
<ScrollProgress springOptions={{ stiffness: 120, damping: 28 }} />
{/* Docs: tracks a local scroll container */}
<ScrollProgress containerRef={ref} />API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Positioning + color classes (e.g. fixed, bg-brand). |
| containerRef | RefObject<HTMLDivElement> | - | Scroll container. Defaults to the document. |
| springOptions | SpringOptions | - | Opt-in soft spring on scaleX. Omit for direct scroll binding. |
Scroll Progress