Scroll Progress

Animated Scroll Progress for your pages

Note: The scroll progress is shown below the navbar of the page.

import { ScrollProgress } from "@/registry/magicui/scroll-progress"

export 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


pnpm dlx shadcn@latest add @magicui/scroll-progress

Usage

import { ScrollProgress } from "@/components/ui/scroll-progress"

<ScrollProgress />

Props

Prop	Type	Default	Description
`className`	`string`	`-`	The class name to be applied to the component

The ScrollProgress component also accepts all properties of the HTMLDivElement type.

Credits

Credit to dipesh_the_dev

Scroll Based Velocity Shimmer Button

On This Page

Installation Usage Props Credits

Contribute

Limited Time Offer

Ship Faster with Magic UI Pro

Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.

Next.js 15 + TypeScript ready

Copy, paste, customize in minutes

Save 100+ hours of development

$199once

Get Lifetime Access

Trusted by 5,000+ developers