• Docs
  • Components
  • Blocks
  • Admin
CtrlK
Get Started
  • Introduction
  • Setup
  • CLI
  • VS Code Extension
  • Figma Code Connect
  • MCP Server
  • llms.txt
  • Changelog
Foundations
  • Design Tokens
  • Theming & Modes
  • Semantic Colors
  • Spacing
  • Typography
Testing
  • Test Guide
  • Performance Tests
  • Visual Regression
Components
  • Accordion
  • Activity Feed
  • Alert
  • Avatar
  • Badge
  • Breadcrumbs
  • Button
  • Card
  • Carousel
  • Checkbox
  • Collapsible
  • Combobox
  • Command Palette
  • Context Menu
  • Date Picker
  • Dialog
  • Dropdown Menu
  • File Upload
  • Hover Card
  • Input
  • Kbd
  • Label
  • Menubar
  • Metric Card
  • Multi Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Quick Actions
  • Radio
  • Rating
  • Resizable
  • Segmented Control
  • Select
  • Separator
  • Sheet
  • Skeleton
  • Slider
  • Spinner
  • Split Button
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag Input
  • Textarea
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree View
Blocks
  • Activity Feed
  • App Shell
  • Authentication Block
  • Benefits Section
  • Cta Section
  • Data Table
  • Empty State
  • Faq Section
  • Feature Grid Section
  • Footer Section
  • Hero Section
  • Kpi Dashboard
  • Kpi Strip
  • Link Card
  • Metric Card
  • Navigation Header
  • Pagination Footer
  • Pricing Table
  • Quick Actions
  • Settings Screen
Resources
  • API Reference

DocumentationLayout

Complete layout component for documentation sites with auto-extraction headings, responsive layout, and TableOfContents integration.

Features

  • Auto-extracts headings for TableOfContents
  • Responsive layout with sidebar and right sidebar
  • Fixed header support
  • TableOfContents integration
  • Configurable content selector
  • Customizable padding and max width

Installation

1

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

API Reference

PropTypeDefaultDescription
childrenReact.ReactNode-Main content to display
headerReact.ReactNode-Header component (e.g., NavigationMenu with variant="header")
sidebarReact.ReactNode-Left sidebar component (e.g., DocumentationSidebar)
rightSidebarReact.ReactNode-Right sidebar content (additional content besides TableOfContents)
showTableOfContentsbooleantrueShow table of contents in right sidebar
contentSelectorstring"article"CSS selector for the content container to extract headings from
maxWidthstring"1536px"Maximum width of the main container
contentTopPaddingstring"58px"Top padding for main content (to account for fixed header)
versionstring-Version string (for version switcher, etc.)

Examples

Complete Documentation Site

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Without TableOfContents

1
2
3
4
5

Custom Content Selector

1
2
3
4
5
6
7
8

With Right Sidebar Content

1
2
3
4
5