# Table of Contents Lines (/docs/table-of-contents-lines)

A compact document outline visualized as interactive depth-aware lines.

## Install

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

## Usage

```tsx
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.