table of contents
auto-scrolling table of contents with intersection observer for active section highlighting.
examples
basic usage
simple flat table of contents.
nested sections
table of contents with nested subsections using the level property.
installation
bash
1npx shadcn@latest add https://ui.inference.sh/r/table-of-contents.jsonusage
tsx
1import { TableOfContents, type TocItem } from '@/components/table-of-contents'23const items: TocItem[] = [4 { id: 'introduction', title: 'Introduction' },5 { id: 'getting-started', title: 'Getting Started' },6 { id: 'installation', title: 'Installation', level: 2 },7 { id: 'configuration', title: 'Configuration', level: 2 },8 { id: 'api', title: 'API Reference' },9]1011export function MyTableOfContents() {12 return <TableOfContents items={items} />13}props
| prop | type | default |
|---|---|---|
| items | TocItem[] | - |
| className | string | - |
TocItem
| property | type | description |
|---|---|---|
| id | string | element id to scroll to |
| title | string | display text |
| level | number | nesting level (1 = top, 2 = nested) |