Table of Contents
NavigationA scrollspy list that highlights the section in view.
TableOfContents watches heading elements with an IntersectionObserver and marks the active one. Clicking an entry smooth-scrolls to that section.
npx shadcn@latest add tocDefault
Scroll the panel and watch the active marker follow.
Introduction
A sample section that demonstrates how the table of contents tracks the currently visible heading while the panel scrolls.
Installation
A sample section that demonstrates how the table of contents tracks the currently visible heading while the panel scrolls.
Quick start
A sample section that demonstrates how the table of contents tracks the currently visible heading while the panel scrolls.
Styling
A sample section that demonstrates how the table of contents tracks the currently visible heading while the panel scrolls.
Components
A sample section that demonstrates how the table of contents tracks the currently visible heading while the panel scrolls.
API reference
A sample section that demonstrates how the table of contents tracks the currently visible heading while the panel scrolls.
1const containerRef = useRef<HTMLDivElement>(null)2const headings = [3 { id: "introduction", label: "Introduction", level: 2 },4 { id: "installation", label: "Installation", level: 2 },5]67<div className="flex gap-6">8 <div ref={containerRef} className="h-64 flex-1 overflow-y-auto">9 {/* sections with matching ids */}10 </div>11 <TableOfContents headings={headings} containerRef={containerRef} />12</div>
API reference
All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.
| Prop | Type | Description |
|---|---|---|
| headings | TocHeading[] | Each heading has an id, label, and optional level. |
| containerRef | RefObject<HTMLElement> | The scroll container to observe as the root. |
| className | string | Override the classes of the list. |