monoline/ui

Component

Toc

Render document outline links with active-section tracking, depth hierarchy, numbered editorial styling, or compact tree mode.

Interactive preview

Usage

Import the component entry and start with its smallest complete example.

Import

import { Toc } from "@chitrank2050/monoline-ui/toc"

Basic usage

import { Toc } from "@chitrank2050/monoline-ui/toc"

// 1. Default Numbered Editorial Variant
<Toc
  items={[
    { id: "intro", label: "Introduction to Monoline" },
    { id: "tokens", label: "OKLCH Color Tokens", depth: 2 },
    { id: "themes", label: "Light & Dark Modes", depth: 3 },
    { id: "install", label: "Installation Guide", depth: 2 }
  ]}
  variant="default"
  heading="On this page"
/>

// 2. Compact Minimalist Variant (Tree with indentation)
<Toc
  items={[
    { id: "intro", label: "Introduction" },
    { id: "usage", label: "Usage", depth: 2 },
    { id: "import", label: "Import syntax", depth: 3 },
    { id: "props", label: "Props reference", depth: 2 }
  ]}
  variant="compact"
  heading="Table of Contents"
/>

// 3. Collapsible Mode
<Toc
  items={items}
  collapsible
  defaultOpen
  heading="Contents · 4 sections"
/>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

01
Use when

Toc links to headings on the current page, tracks the active section, and can collapse on smaller screens.

02
Avoid when

The links cross pages, or target headings do not have stable, unique ids.

03
Accessibility

Toc creates a nav with ordered fragment links. Its collapsible trigger currently lacks aria-expanded and aria-controls.

04
Client Component

This component needs browser JavaScript for state or browser APIs.

API reference

Props, slots, and callbacks available on this component.

itemsTocItem[]List of heading items ({ id, label, depth? }) to track and navigate
variant"default" | "compact""default" renders numbered 01/02 mono indices with left accent bar; "compact" renders clean indented text links
activeIdstringOptional controlled active ID overriding the viewport intersection observer
headingReactNodeSection header label (e.g. 'On this page' or 'Table of Contents')
collapsiblebooleanWraps the table of contents inside an expandable disclosure card with chevron toggle
defaultOpenbooleanInitial expansion state when collapsible is enabled (defaults to false)
scrollOffsetnumberTop margin offset in pixels for intersection observer detection (defaults to 80)

Design tokens

Theme variables this component reads for color, spacing, and motion.

--accentCSS varAccent color applied to the active indicator bar and active step number
--text-mutedCSS varMuted color for inactive step numbers and nested tertiary items
--text-secondaryCSS varDefault color for inactive heading link labels
--textCSS varPrimary foreground color for hovered and active items

Implementation

The source used by the example above, including any state it needs.

import { Toc } from "@chitrank2050/monoline-ui/toc"

export function ArticleSidebar() {
  const sections = [
    { id: "overview", label: "Architecture Overview" },
    { id: "token-system", label: "Token System & Scales", depth: 2 },
    { id: "color-primitives", label: "OKLCH Primitives", depth: 3 },
    { id: "motion-physics", label: "Spring Motion Physics", depth: 3 },
    { id: "accessibility", label: "Accessibility notes", depth: 2 }
  ]

  return (
    <aside className="w-64">
      <Toc
        items={sections}
        variant="default"
        heading="On This Page"
        scrollOffset={100}
      />
    </aside>
  )
}

Compare related components or review the package and theme setup.

Documentation mapView component catalog →
01ComponentRailComponent · ReferenceReference→02ComponentSection HeadComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→