Table of Contents – React UI Component

Open in

A Notion-style list of heading links with nested indentation, subtle hover backgrounds, and active-section tracking. Use level 1, 2, or 3 to reflect your heading hierarchy. Motion and smooth scrolling respect reduced motion.

Installation

Add the toc component from Hangry UI to this project.

Use the project's package manager to run:
shadcn@latest add https://ui.razeev.com/r/toc.json

Integrate the component with the existing layout and styling.
Keep its interactions and reduced-motion support intact.

How to use

1import { Toc } from "@/components/hangry-ui/components/toc";
2
3<Toc
4  items={[
5    { id: "overview", label: "Overview" },
6    { id: "installation", label: "Installation" },
7    { id: "usage", label: "Usage" },
8  ]}
9/>;

Match each item ID to an element on the page. The TOC highlights every listed target visible in the viewport. level controls indentation and marker width: level 1 is the longest, level 2 is shorter, and level 3 is shortest. The docs page also adds its title and preview to the TOC automatically.

Props

Prop	Type	Default	Description
`items`	`TocItem[]`	Required	Ordered links to page elements. Each item has an id, label, and optional level.
`title`	`string`	`"Table of contents"`	Accessible label for the navigation.
`className`	`string`	`""`	Additional classes applied to the navigation rail.

TocItem

Field	Type	Required	Description
`id`	`string`	Yes	ID of the target element on the page.
`label`	`string`	Yes	Text shown in the expanded table.
`level`	`1 \| 2 \| 3`	No	Deeper levels use shorter, indented markers.

Dependencies

Motion