Table of contentsPro
On-this-page list that highlights the current section, with a gliding marker and progress ring.
Introduction
Every section of this article is tracked as you scroll. The list on the right highlights where you are, and the ring fills with your progress through the page. Click an entry to jump straight to it.
Headings stay focusable, so keyboard and screen-reader users land in the right place too.
Installation
Every section of this article is tracked as you scroll. The list on the right highlights where you are, and the ring fills with your progress through the page. Click an entry to jump straight to it.
Headings stay focusable, so keyboard and screen-reader users land in the right place too.
Using the CLI
Every section of this article is tracked as you scroll. The list on the right highlights where you are, and the ring fills with your progress through the page. Click an entry to jump straight to it.
Headings stay focusable, so keyboard and screen-reader users land in the right place too.
Manual setup
Every section of this article is tracked as you scroll. The list on the right highlights where you are, and the ring fills with your progress through the page. Click an entry to jump straight to it.
Headings stay focusable, so keyboard and screen-reader users land in the right place too.
Theming
Every section of this article is tracked as you scroll. The list on the right highlights where you are, and the ring fills with your progress through the page. Click an entry to jump straight to it.
Headings stay focusable, so keyboard and screen-reader users land in the right place too.
Motion
Every section of this article is tracked as you scroll. The list on the right highlights where you are, and the ring fills with your progress through the page. Click an entry to jump straight to it.
Headings stay focusable, so keyboard and screen-reader users land in the right place too.
FAQ
Every section of this article is tracked as you scroll. The list on the right highlights where you are, and the ring fills with your progress through the page. Click an entry to jump straight to it.
Headings stay focusable, so keyboard and screen-reader users land in the right place too.
When to use
- Long docs, articles and settings pages.
When not to use
- Short pages with two or three sections.
Installation
Usage
Import it from @/components/ui/table-of-contents after installing.
import { TableOfContents } from "@/components/ui/table-of-contents";
<TableOfContents items={[{ id: "install", title: "Installation" }, { id: "cli", title: "CLI", level: 3 }]} />API reference
TableOfContents
Links to headings by id; tracks which one you're reading.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id; title; level?: 2 | 3 }[] | – | Heading ids on the page. |
| container | RefObject<HTMLElement> | – | Scrollable element; omit for the page. |
| offset | number | 96 | Height of your sticky header. |
| title | string | "On this page" | Heading text. |
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Move between links |
| Enter | Jump to the section |
Accessibility
- A labelled nav; the current link has aria-current="location".
- Jumping moves focus to the heading, so screen readers continue from there.
- Smooth scrolling is skipped under reduced motion.
Motion
- The marker glides to the current section; the ring fills with progress.
Responsive behavior
- Hide it below your sidebar breakpoint.
Performance
- A passive scroll listener; no per-frame layout reads beyond heading positions.
Notes for AI
- Give headings tabIndex={-1} so focus can land on them.
This page as Markdown, for assistants and coding agents:
/components/table-of-contents/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt