Content blocks

Table of contents

The table of contents block: links to the page’s headings, indented 24px per level. Inside `BlockRenderer` it collects the headings automatically.

Usage

  • Use Table of contents at the top of long pages with several headings.
  • Give headings ids (or render inside BlockRenderer) so entries link to them.
  • Don’t use it on short pages with one or two sections.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/TableofcontentsExample.tsx
import { BlockContent, TableOfContents } from '@krackedui/motion';

export function TableOfContentsExample() {
  return (
    <BlockContent>
      <TableOfContents
        items={[
          { id: 'a', level: 1, text: 'Overview' },
          { id: 'b', level: 2, text: 'Goals' },
          { id: 'c', level: 3, text: 'Scope' },
          { id: 'd', level: 2, text: 'Timeline' },
          { id: 'e', level: 1, text: 'Appendix' },
        ]}
      />
    </BlockContent>
  );
}

Examples

Empty

Add headings to create a table of contents.

API Reference

TableOfContents

Based on <div> and supports its props. Adds:

PropTypeDefault
items
TocItem[]
onItemClick
(id: string) => void

Accessibility

  • Each entry is an <a href="#id">, so it works with the keyboard and middle-click.
© 2026 Motion. Internal documentation.