Scroll Progress

An animated scroll progress bar fixed to the top of the page. Inspired by Magic UI’s Scroll Progress . The gradient line scales with the user’s scroll position.

Installation

npx shadcn@latest add https://prismaui.com/components/scroll-progress.json

Import

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

Usage

Place the component at the root of your layout or page:

export default function Layout({ children }) {
  return (
    <>
      <ScrollProgress />
      {children}
    </>
  );
}

Custom Colors

Override the default gradient with your own colors via className:

<ScrollProgress className='bg-linear-to-r from-blue-500 via-purple-500 to-pink-500' />

Thicker Bar

<ScrollProgress className='h-0.5' />

Props