# Table of Content — Skecher UI

A reading-aware page outline with an animated active marker, expandable subsections, and a progress rail.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/table-of-content
```

## Dependencies

- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
"use client";

import { DocsToc } from "@/components/ui/table-of-content";

export default function ArticlePage() {
  return (
    <div className="grid grid-cols-[minmax(0,1fr)_12rem] gap-8">
      <article>
        <h1>Getting started</h1>
        <h2 id="overview" data-toc>Overview</h2>
        <p>Introduce the topic here.</p>
        <h3 id="installation" data-toc="3">Installation</h3>
        <p>Explain the first step here.</p>
        <h2 id="api" data-toc>API</h2>
        <p>Document the API here.</p>
      </article>
      <DocsToc className="sticky top-24 self-start" />
    </div>
  );
}
```

## Source files

- components/ui-components/table-of-content.tsx — Animated table of content with reading progress

## Canonical resources

- Documentation: https://skecher-ui.com/docs/table-of-content
- Registry item with complete source: https://skecher-ui.com/r/table-of-content.json
- Component AI context: https://skecher-ui.com/llms/table-of-content