Table of Contents Lines

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

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

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

API⠋

Main export: TableOfContentsLines

Compact heading navigation drawn as lines. Each heading gets a line, indented by its level, with two shorter lines between consecutive headings. The active heading's line extends and darkens, as does a hovered one. 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 only the lines; always (default) shows them. 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.