Scroll Progress

Motion

A React scroll progress indicator with a thin top bar and a circular percent ring, smoothed by a spring, that tracks the window or any scrollable container you pass.

src/registry/premium/scroll-progress.tsx/r/scroll-progress.json

Installation#

bash

npx shadcn@latest add @minidev/scroll-progress

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/scroll-progress.json

Usage#

tsx

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

export function Example() {
  return <ScrollProgress />
}

API reference#

ScrollProgress props
Prop	Type	Default
`variant`	`"bar" \| "circle" \| "both"`	`"both"`
`container`	`React.RefObject<HTMLElement \| null>`	`-`
`fixed`	`boolean`	`false`
`height`	`number`	`3`
`size`	`number`	`40`
`children`	`React.ReactNode`	`-`
`title`	`React.ReactNode`	`"What is new in Lumen 3.0"`
`subtitle`	`React.ReactNode`	`"Release notes · 4 min read"`
`className`	`string`	`-`