## Scroll Spy TOC (S—189)

A table of contents that tracks the section in view: a marker slides to the active heading and clicks scroll smoothly.

- URL: https://sundaeui.dev/components/scroll-spy
- Category: Navigation & menus · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/scroll-spy.json`
- Tags: scroll-spy, docs, anchor, table-of-contents, navigation, headings

An IntersectionObserver works out which heading is current as you read, and a marker slides beside the matching TOC entry. Clicking an entry scrolls there and briefly holds it active so the marker does not flicker.
Nested entries indent; on narrow cards the TOC becomes a horizontal chip row.

### Usage

```tsx
import { ScrollSpy } from '@/components/sundae/scroll-spy'

<ScrollSpy />
```

### Props

- `sections` (`{ id: string; title: string; level?: 1 | 2; body: ReactNode }[]`, required): Sections to render and track.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Docs, long settings pages, legal text, reports.

### When not to use

- Pages with fewer than three sections.

### Accessibility

- A nav landmark; the current entry has aria-current="location".
- Activating an entry moves focus to the section heading.
- Reduced motion removes the movement and keeps every state change.