Table of Contents - Saturation UI

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/table-of-contents.json

Usage

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

const items = [
  { id: "installation", title: "Installation", level: 2 },
  { id: "usage", title: "Usage", level: 2 },
  { id: "api-reference", title: "API Reference", level: 2 },
]

<TableOfContents items={items} />

API Reference

Prop	Type	Default	Description
`items`	`TocItem[]`	—	Array of heading items to display.
`activeId`	`string`	—	Controlled active heading id.
`onActiveChange`	`(id: string) => void`	—	Callback when the active heading changes.
`className`	`string`	—	Additional CSS classes.

TocItem

interface TocItem {
  id: string
  title: string
  level: number
}

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/table-of-contents.json

Usage

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

const items = [
  { id: "installation", title: "Installation", level: 2 },
  { id: "usage", title: "Usage", level: 2 },
  { id: "api-reference", title: "API Reference", level: 2 },
]

<TableOfContents items={items} />

API Reference

Prop	Type	Default	Description
`items`	`TocItem[]`	—	Array of heading items to display.
`activeId`	`string`	—	Controlled active heading id.
`onActiveChange`	`(id: string) => void`	—	Callback when the active heading changes.
`className`	`string`	—	Additional CSS classes.

TocItem

interface TocItem {
  id: string
  title: string
  level: number
}