Avara UI
Avara UI

Table of Contents

An interactive, responsive Table of Contents navigation block engineered to sit on the left side of long documents, articles, or documentation pages.
Features a real-time scroll-spy, spring-animated section indicator, scroll progress bar, section search filter, and mobile navigation drawer.

Table of Contents (Left Side Navigation)

Sticky left-hand TOC navigation with automatic scroll-spy, progress indicator, and section filter.

headings
Array of TOCHeading objects ({ id, title, level }) defining the document outline.
showProgress
Displays an animated top progress bar reflecting current document scroll percentage.
showSearch
Enables an inline search filter input inside the right-hand TOC sidebar.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Table Of Contents

npx shadcn@latest add @algorize-ui/table-of-contents

components/custom/blocks/TableOfContentsBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs these for you. Run them yourself only if you are adding Table Of Contents to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component. shiki comes in with the component above rather than from Table Of Contents directly.

ui-codeblocks is a component, not a package — the shadcn CLI installs it as source files.

npx shadcn@latest add @algorize-ui/ui-codeblocks

shiki is an npm package.

npm install shiki

Features

Right-Side Sticky Panel

Positions the TOC navigation cleanly on the right column while main content flows on the left.

Scroll-Spy Tracking

Automatically detects active viewport headings and animates the active indicator smoothly along a spring curve, with no animation library.

Section Search Filter

Filter long document section headers instantly with an embedded search input.

Mobile Dropdown Menu

Collapses into a sticky mobile bar with drawer navigation on smaller devices.

Props Reference

Component / ObjectPropTypeDefaultDescription
TableOfContentsBlockitemsTOCItem[]DEFAULT_ITEMSArray of section content blocks with titles, levels, descriptions, and optional code snippets.
TableOfContentsBlockheadingsTOCHeading[]Derived from itemsCustom outline structure containing id, title, and level (1 | 2 | 3).
TableOfContentsBlockactiveIdstringControlled by scroll-spyManually override the currently highlighted active section ID.
TableOfContentsBlockonSelectHeading(id: string) => voidSmooth scroll to targetCallback fired when a user clicks on a section heading in the TOC sidebar.
TableOfContentsBlockcolorstring"var(--primary)"Accent theme color for active indicator, progress bar, and search highlights (Hex, RGB, or CSS var).
TableOfContentsBlockshowProgressbooleantrueShows or hides the top reading progress indicator bar.
TableOfContentsBlockshowSearchbooleantrueShows or hides the inline section search filter input inside the sidebar.
TableOfContentsBlocksidebarTitlestring"On this page"Header text displayed at the top of the sticky TOC sidebar.
TOCItem / TOCHeadingidstringRequiredUnique DOM element ID matching the section heading target.
TOCItem / TOCHeadingtitlestringRequiredDisplay title shown in the TOC sidebar and main content section.
TOCItem / TOCHeadinglevel1 | 2 | 31Indentation hierarchy level for sub-sections.
TOCItemdescriptionstring—Body paragraph content associated with the section.
TOCItemcodeSnippetstring—Code snippet displayed inside the section card with a copy-to-clipboard button.
TOCItembadgestring—Badge label shown next to the section title (e.g., "New", "Updated").