---
name: "@toc-cn"
slug: "toc-cn"
description: "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."
category: "Niche/single-purpose"
tags: ["aesthetic", "animation", "blocks", "cms", "dashboard", "forms", "loaders", "mobile", "navigation", "tables"]
framework: "react"
license: null
author: "lenxism"
website: "https://tocn.vercel.app"
github: "https://github.com/lenxism/tocn"
registry: "https://tocn.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 0
component_count: 1
generated_at: "2026-07-28T08:00:50.948Z"
---

# @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.

## Links

- Website: https://tocn.vercel.app
- GitHub: https://github.com/lenxism/tocn
- Registry JSON: https://tocn.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/toc-cn
- This file: https://sh4dcn.vercel.app/md/toc-cn.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://tocn.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://tocn.vercel.app/r/registry.json
bunx shadcn@latest add https://tocn.vercel.app/r/registry.json
# clone the source repo
git clone https://github.com/lenxism/tocn.git
# fetch the raw registry index
curl -s https://tocn.vercel.app/r/registry.json
```

## Components (1)

| name | type | description | install |
| --- | --- | --- | --- |
| table-of-contents | registry: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` |

## For AI agents

```text
You are adding components from @toc-cn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/toc-cn.md) for the component list.
2. Fetch the machine-readable index: https://tocn.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: toc-cn).
```