Design KitComponentv0.3.0

NBTableOfContents

Auto-generated TOC for long pages (h2-based).

When to use

Use on docs pages and long guides to reduce scroll fatigue.

Import

Import
tsx
import NBTableOfContents from "@/components/NBTableOfContents";

Example

Example
tsx
// See import NBTableOfContents from "@/components/NBTableOfContents"; for import usage.

Live preview

This component scans h2 headings under main. Use it on docs pages and long guides.

Live preview

People also ask

Where do I import NBTableOfContents from?

Use: import NBTableOfContents from "@/components/NBTableOfContents";

How do I keep it multi-domain safe?

Don’t hardcode domains in metadata/JSON-LD. Use getSiteUrl() + toAbsoluteUrl().

Design kit

Turn this into a sellable export

If you want the “packaged kit” (versioning, license, exportable docs and components), we can scope the release pipeline.