Scroll Progress Demo

PreviousNext

Example showing animated scroll progress for your pages.

Docs
magicuiexample

Preview

Loading preview…
registry/example/scroll-progress-demo.tsx
import { ScrollProgress } from "@/registry/magicui/scroll-progress"

export default function ScrollProgressDemo() {
  return (
    <div className="z-10 rounded-lg p-4">
      <ScrollProgress className="top-[65px]" />
      <h2 className="pb-4 font-bold">
        Note: The scroll progress is shown below the navbar of the page.
      </h2>
    </div>
  )
}

Installation

npx shadcn@latest add @magicui/scroll-progress-demo

Usage

import { ScrollProgressDemo } from "@/components/scroll-progress-demo"
<ScrollProgressDemo />