Shadcn Scrollspy

Custom Shadcn Scrollspy for React and Tailwind CSS. Dynamically highlights navigation to indicate current visible section in viewport during page scroll

Base UI Radix UI

Installation


pnpm dlx shadcn@latest add @reui/scrollspy

Usage

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.

Rating Sortable

On This Page

Installation Usage Examples Horizontal API Reference Scrollspy Data Attributes

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>

"use client"

import { useRef } from "react"
import { Scrollspy } from "@/components/reui/scrollspy"

import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"

export function Pattern() {
  const parentRef = useRef<HTMLDivElement>(null)
  const nav = [
    {
      id: "section-6",
      label: "Section 1",
    },
    {
      id: "section-7",
      label: "Section 2",
    },
    {
      id: "section-8",
      label: "Section 3",
    },
    {
      id: "section-9",
      label: "Section 4",
    },
    {
      id: "section-10",
      label: "Section 5",
    },
  ]

  return (
    <div className="w-full space-y-5">
      <div className="flex w-full gap-2">
        <Scrollspy offset={50} targetRef={parentRef} className="flex gap-2.5">
          {nav.map((item) => (
            <Button
              key={item.id}
              variant="outline"
              data-scrollspy-anchor={item.id}
              className={
                "data-[active=true]:bg-primary data-[active=true]:text-primary-foreground"
              }
            >
              {item.label}
            </Button>
          ))}
        </Scrollspy>
      </div>
      <div className="w-full" ref={parentRef}>
        <ScrollArea className="h-[400px] grow">
          <div className="space-y-8">
            {nav.map((item) => (
              <div key={item.id} id={item.id} className="space-y-2.5">
                <h3 className="text-foreground text-base">{item.label}</h3>
                <div className="bg-muted rounded-2xl h-[350px]"></div>
              </div>
            ))}
          </div>
        </ScrollArea>
      </div>
    </div>
  )
}

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.

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.

"use client"

import { useRef } from "react"
import { Scrollspy } from "@/components/reui/scrollspy"

import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"

export function Pattern() {
  const parentRef = useRef<HTMLDivElement | null>(null)

  const nav = [
    {
      id: "section-1",
      label: "Section 1",
    },
    {
      id: "section-2",
      label: "Section 2",
    },
    {
      id: "section-3",
      label: "Section 3",
    },
    {
      id: "section-4",
      label: "Section 4",
    },
    {
      id: "section-5",
      label: "Section 5",
    },
  ]

  return (
    <div className="flex w-full grow gap-5">
      <div className="flex w-[150px] flex-col gap-2">
        <Scrollspy
          offset={50}
          targetRef={parentRef}
          className="flex flex-col gap-2.5"
        >
          {nav.map((item) => (
            <Button
              key={item.id}
              variant="outline"
              data-scrollspy-anchor={item.id}
              className={
                "data-[active=true]:bg-primary data-[active=true]:text-primary-foreground"
              }
            >
              {item.label}
            </Button>
          ))}
        </Scrollspy>
      </div>
      <div className="grow" ref={parentRef}>
        <ScrollArea className="-me-5 h-[500px] grow pe-5">
          <div className="space-y-8">
            {nav.map((item) => (
              <div key={item.id} id={item.id} className="space-y-2.5">
                <h3 className="text-foreground text-base">{item.label}</h3>
                <div className="bg-muted rounded-2xl h-[350px]"></div>
              </div>
            ))}
          </div>
        </ScrollArea>
      </div>
    </div>
  )
}