@toc-cn
A single-component shadcn/ui registry providing a documentation-style table of contents with IntersectionObserver scroll spy, an animated SVG tree indicator showing reading progress, and a mobile-first sticky collapsible header that expands into the full TOC. Supports nested headings with indented hierarchy. Installed via npx shadcn add from tocn.vercel.app. Built with React, Next.js, and Tailwind CSS. Free and open source. Use for: documentation sites, long-form content pages, or MDX-based docs built with Next.js that need a polished, animated in-page navigation sidebar.
1 components react shadcn-cli
Install this registry
shadcn (npm)
npx shadcn@latest add https://tocn.vercel.app/r/registry.json pnpm
pnpm dlx shadcn@latest add https://tocn.vercel.app/r/registry.json bun
bunx shadcn@latest add https://tocn.vercel.app/r/registry.json fetch registry
curl -s https://tocn.vercel.app/r/registry.json Components
1 total Table of Contents block
In-page documentation table of contents with scroll-position spy, animated SVG tree indicator, and mobile sticky collapsible.
npx shadcn@latest add https://tocn.vercel.app/r/table-of-contents.json