Getting Started
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
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/magicui/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
Limited Time Offer
Ship Faster with Magic UI ProMagic 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