MDX.org.ai
UI ComponentsContent

Docs

Documentation layout with sidebar navigation, content area, and table of contents

Documentation layout optimized for technical content with sidebar navigation, automatic table of contents, and pagination.

Structure

┌──────────┬────────────────────────────┬─────────┐
│ sidebar  │ content                    │ toc     │
│ ┌──────┐ │ ┌────────────────────────┐ │ ┌─────┐ │
│ │search│ │ │ header                 │ │ │title│ │
│ └──────┘ │ │ ┌────────────────────┐ │ │ │     │ │
│ ┌──────┐ │ │ │title               │ │ │ │ • h2│ │
│ │ nav  │ │ │ │description         │ │ │ │ • h2│ │
│ │      │ │ │ └────────────────────┘ │ │ │  • h3│
│ │• item│ │ └────────────────────────┘ │ │ • h2│ │
│ │• item│ │ ┌────────────────────────┐ │ │     │ │
│ │  ▸grp│ │ │ body                   │ │ └─────┘ │
│ │   •  │ │ │                        │ │         │
│ │   •  │ │ │ {children}             │ │         │
│ │• item│ │ │                        │ │         │
│ │      │ │ └────────────────────────┘ │         │
│ └──────┘ │ ┌────────────────────────┐ │         │
│          │ │ pagination             │ │         │
│          │ │ ← prev      next →     │ │         │
│          │ └────────────────────────┘ │         │
│          │ ┌────────────────────────┐ │         │
│          │ │ footer (edit, updated) │ │         │
│          │ └────────────────────────┘ │         │
└──────────┴────────────────────────────┴─────────┘

Usage

<Docs
  title="Getting Started"
  description="Learn how to set up and use the SDK"
  nav={[
    { label: 'Introduction', href: '/docs' },
    { label: 'Installation', href: '/docs/installation' },
    { label: 'Configuration', href: '/docs/configuration' },
    {
      label: 'Guides',
      children: [
        { label: 'Quick Start', href: '/docs/guides/quickstart' },
        { label: 'Authentication', href: '/docs/guides/auth' },
      ],
    },
  ]}
  toc={[
    { title: 'Prerequisites', id: 'prerequisites', level: 2 },
    { title: 'Installation', id: 'installation', level: 2 },
    { title: 'npm', id: 'npm', level: 3 },
    { title: 'yarn', id: 'yarn', level: 3 },
  ]}
  prev={{ label: 'Introduction', href: '/docs' }}
  next={{ label: 'Configuration', href: '/docs/configuration' }}
  editUrl="https://github.com/org/repo/edit/main/docs/installation.mdx"
  lastUpdated="2024-03-15"
>
  ## Prerequisites
 
  Before installing, ensure you have Node.js 18+.
 
  ## Installation
 
  ### npm
  ```bash
  npm install mypackage
  ```
 
  ### yarn
  ```bash
  yarn add mypackage
  ```
</Docs>

On this page