Scroll Progress

A smart table of contents component that tracks reading progress with a fluid active line indicator that dynamically bends and adapts to nested subtopics.

Preview

Installation

Install the component using the CLI.

$npx shadcn@latest add https://ankurz.me/r/scroll-progress.json

Usage

Import the component:

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

Use it in your code:

<ScrollProgress 
  items={[
    { id: "intro", title: "Introduction", level: 1 },
    { id: "features", title: "Features", level: 1 }
  ]} 
/>

Props

Property	Type	Default	Description
`items*`	`Array`	`[]`	Array of items with { id, title, level }. 'id' corresponds to section ID.
`className`	`string`	`""`	Optional custom classes for the container.
`scrollAreaRef`	`RefObject`	`window`	Ref to the scrollable element. Defaults to window if not provided.