Custom Shadcn Scrollspy for React and Tailwind CSS. Dynamically highlights navigation to indicate current visible section in viewport during page scroll
"use client"
import { useRef } from "react"Installation
pnpm dlx shadcn@latest add @reui/scrollspy
Usage
import { Scrollspy } from "@/components/reui/scrollspy"<Scrollspy targetRef={containerRef}>
<a href="#section-1" data-scrollspy-anchor="section-1">Section 1</a>
<a href="#section-2" data-scrollspy-anchor="section-2">Section 2</a>
</Scrollspy>
<div ref={containerRef}>
<div id="section-1">Content 1</div>
<div id="section-2">Content 2</div>
</div>Examples
Horizontal
"use client"
import { useRef } from "react"API Reference
Scrollspy
The main component that wraps the navigation links and manages the scroll spying logic.
| Prop | Type | Default | Description |
|---|---|---|---|
targetRef | RefObject<HTMLElement | Document> | window | The scrollable container to monitor. |
onUpdate | (id: string) => void | - | Callback fired when the active section changes. |
offset | number | 0 | Global pixel offset from the top when calculating active sections. |
smooth | boolean | true | Whether to use smooth scrolling when clicking on anchors. |
history | boolean | true | Whether to update the URL hash when the active section changes. |
dataAttribute | string | "scrollspy" | The prefix for data attributes (e.g., data-scrollspy-anchor). |
className | string | - | Additional CSS classes for the wrapper. |
Data Attributes
Navigation links within Scrollspy should use these attributes to connect to sections:
| Attribute | Description |
|---|---|
data-scrollspy-anchor | Required. The ID of the target section (without the #). |
data-scrollspy-offset | Optional. Overrides the global offset for this specific link. |
The component adds data-active="true" to the link element when its corresponding section is active.
More Shadcn Scrollspy components
Browse 2 production-ready Shadcn Scrollspy components for dashboards, forms, and product UI. These examples follow the Radix UI implementation with accessible primitives from the Radix stack and stay fully compatible with Shadcn Create so radius, color, and typography match your configured theme.
Browse all 2 Shadcn Scrollspy components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the ReUI library.