Overview

The Scroll Progress component provides visual feedback on reading progress, helping users navigate long-form content and understand their position within articles or documentation. It enhances user engagement by reducing uncertainty about content length and encouraging completion of reading tasks. Perfect for blogs, documentation sites, and any content-heavy interfaces where user retention matters.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/scroll-progress.json

Usage

Basic Usage

1"use client"
2
3import ScrollProgress from "@/registry/components/scroll-progress"
4
5export function Component() {
6  return <ScrollProgress position="top" height={4} color="#3b82f6" />
7}

Content-Based Progress

Track progress through specific content by wrapping it with the ScrollProgress component:

1"use client"
2
3import ScrollProgress from "@/registry/components/scroll-progress"
4
5export function ArticleWithProgress() {
6  return (
7    <ScrollProgress height={6} color="#3b82f6" position="top">
8      <article>
9        <h1>Your Article Title</h1>
10        <p>Your article content...</p>
11        {/* Progress will track through this content */}
12      </article>
13    </ScrollProgress>
14  )
15}

API Reference

Props

Examples

Article Progress Tracking

Track reading progress through article content with a custom styled progress bar.

Note: The scroll progress bar will be displayed at the top of the page during this demo.