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>