Scroll Progress

PreviewCode

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

@/demos/ScrollProgressDemo.tsx

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

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

Installation

pnpm

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

bun

bunx shadcn@latest add @magicui-solid/scroll-progress

yarn

yarn dlx shadcn@latest add @magicui-solid/scroll-progress

npm

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

Usage

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

<ScrollProgress />

Props

Prop	Type	Default	Description
class	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

Original:

magicui.design/docs/components/scroll-progress