Scroll Progress

Navigation

A thin bar that fills as the user scrolls.

ScrollProgress measures the scroll position of the window or of any element you pass via targetRef and renders a progress fill.

npx shadcn@latest add scroll-progress

Inside a container

Pass targetRef to track an element with its own scroll.

Preview

Live

Paragraph 1. The progress bar at the top fills as you scroll through this scrollable panel. Keep scrolling to watch it grow.

Paragraph 2. The progress bar at the top fills as you scroll through this scrollable panel. Keep scrolling to watch it grow.

Paragraph 3. The progress bar at the top fills as you scroll through this scrollable panel. Keep scrolling to watch it grow.

Paragraph 4. The progress bar at the top fills as you scroll through this scrollable panel. Keep scrolling to watch it grow.

Paragraph 5. The progress bar at the top fills as you scroll through this scrollable panel. Keep scrolling to watch it grow.

Paragraph 6. The progress bar at the top fills as you scroll through this scrollable panel. Keep scrolling to watch it grow.

Paragraph 7. The progress bar at the top fills as you scroll through this scrollable panel. Keep scrolling to watch it grow.

Paragraph 8. The progress bar at the top fills as you scroll through this scrollable panel. Keep scrolling to watch it grow.

Paragraph 9. The progress bar at the top fills as you scroll through this scrollable panel. Keep scrolling to watch it grow.

Paragraph 10. The progress bar at the top fills as you scroll through this scrollable panel. Keep scrolling to watch it grow.

Paragraph 11. The progress bar at the top fills as you scroll through this scrollable panel. Keep scrolling to watch it grow.

Paragraph 12. The progress bar at the top fills as you scroll through this scrollable panel. Keep scrolling to watch it grow.

tsx

1const ref = useRef<HTMLDivElement>(null)
2
3<div ref={ref} className="h-48 overflow-y-auto rounded-lg border">
4  <ScrollProgress targetRef={ref} className="sticky top-0" />
5  <div className="space-y-4 p-4">
6    <p>Paragraph content…</p>
7  </div>
8</div>

Whole page

Without a targetRef the bar tracks the window scroll.

Preview

Live

This instance follows the page scroll. The bar above sits at the top of this preview.

tsx

1<ScrollProgress />

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
targetRef	RefObject<HTMLElement>	Track a specific scrollable element instead of the window.
className	string	Override the classes of the track.
style	CSSProperties	Inline styles forwarded to the track.