Scroll Progress

Fixed-position thin progress bar showing how far the user has scrolled down the page. Configurable color and height.

Scroll progress bar at top of page

Code

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

// Add to your root layout — renders a fixed progress bar at the top of the page
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <ScrollProgress color="var(--color-accent)" />
      {children}
    </>
  )
}

Installation

$npx particleui-cli add scroll-progress

Usage

TSX

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

// Add to your root layout — renders a fixed progress bar at the top of the page
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <ScrollProgress color="var(--color-accent)" />
      {children}
    </>
  )
}

Props

Prop	Type	Default	Required
className	string	—	no
color	string	`"var(--color-accent)"`	no

Details

Source filecomponents/ui/scroll-progress.tsx

Typeui

Categorieslayout, particles

npm dependencies

Registry deps

Claude skill—