> For AI agents: the complete documentation index is available at https://rspress.rs/llms.txt, the full documentation bundle is available at https://rspress.rs/llms-full.txt.

# Overview page

The Overview page displays an overview of all articles in a directory, automatically extracting information from the sidebar to generate grouped content.

## Usage

Configure `overview: true` in the directory's `index.md` to enable it:

```md title="api/index.md"
---
overview: true
title: API Overview
---

This is the API overview page.
```

The Overview page automatically reads the current directory's [sidebar configuration](https://rspress.rs/guide/basic/auto-nav-sidebar.md) and extracts article titles to generate grouped cards.

## Example

Given the following directory structure and `_meta.json` configuration:

```tree
docs
└── api
    ├── _meta.json
    ├── index.md        <-- overview: true
    ├── config
    │   ├── _meta.json
    │   ├── basic.mdx
    │   └── theme.mdx
    └── runtime
        ├── _meta.json
        ├── hooks.mdx
        └── context.mdx
```

```mdx title="api/index.md"
---
overview: true
title: API Overview
---

This is the API overview page.
```

```json title="api/_meta.json"
[
  { "type": "file", "name": "index", "label": "API Overview" },
  { "type": "dir", "name": "config", "label": "Config" },
  { "type": "dir", "name": "runtime", "label": "Runtime" }
]
```

The generated Overview page looks like:


# Overview page

## Config

### [basic](/#)

- [title](/##title)
- [description](/##description)

### [theme](/#)

- [darkMode](/##dark-mode)
- [footer](/##footer)
## Runtime

### [hooks](/#)

- [usePage](/##use-page)
- [useSite](/##use-site)

### [context](/#)

- [DataContext](/##data-context)
- [ThemeContext](/##theme-context)

## Configuration

### overviewHeaders

Controls the heading levels displayed in the Overview page, defaults to `[2]` (only h2 headings).

Can be configured in `_meta.json`:

```json title="_meta.json"
[
  {
    "type": "file",
    "name": "component",
    "overviewHeaders": [2, 3]
  }
]
```

Or in the article's frontmatter:

```md title="component.mdx"
---
overviewHeaders: [2, 3]
---
```

### Nested overview pages

Subdirectories can also have their own Overview pages by configuring `overview: true` in the subdirectory's `index.md`:

```tree
docs
└── api
    ├── index.md         <-- overview: true
    └── theme
        ├── index.md     <-- overview: true (nested Overview page)
        ├── component.mdx
        └── utils.mdx
```

## Customization

If you need to fully customize the Overview page content, there are two approaches:

### Approach 1: customize styles via custom theme

Use a [custom theme](https://rspress.rs/guide/basic/custom-theme.md) to modify the styles of the [OverviewGroup](https://rspress.rs/ui/layout-components/overview-group.md) component, while continuing to use the built-in Overview page functionality:

```mdx title="index.mdx"
---
overview: true
---
```

### Approach 2: fully custom page content

Use the [OverviewGroup](https://rspress.rs/ui/layout-components/overview-group.md) component with `pageType: doc-wide` to adjust the page layout and define content yourself:

```mdx title="index.mdx"
---
pageType: doc-wide
---

# My custom overview page

import { OverviewGroup } from '@rspress/core/theme';

<OverviewGroup
  group={{
    name: 'Custom Group',
    items: [
      {
        text: 'Page Title',
        link: '/path/to/page',
        headers: [
          { id: 'section-1', text: 'Section 1', depth: 2 },
          { id: 'section-2', text: 'Section 2', depth: 2 },
        ],
      },
    ],
  }}
/>
```