Table of Contents

npx shadcn@latest add https://4af.selfsimilar.dev/r/table-of-contents.json

import { TableOfContents } from "@/components/ui/table-of-contents";

<TableOfContents
  items={headings}
  rootRef={articleRef}
  className="max-h-80"
/>

API⠋

Main export: TableOfContents

Heading navigation with a dashed rail and an active marker. variant="span" (default) marks every visible heading; variant="single" marks one. Clicking an entry scrolls the document smoothly. When no heading is on screen, the last heading scrolled past stays active.

Give it a height and it scrolls on its own, without a visible scrollbar, keeping the active entry centred.

labels="hover" hides the headings until the list is hovered or keyboard-focused, leaving the rail and marker; always (default) shows them. The rail geometry is the same either way. On touch screens the headings always show.

rootRef is the document's scroll root. Pass it when the article scrolls inside a container rather than the page.