#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:

---
overview: true
title: API Overview
---

This is the API overview page.

The Overview page automatically reads the current directory's sidebar configuration and extracts article titles to generate grouped cards.

#Example

Given the following directory structure and _meta.json configuration:

---
overview: true
title: API Overview
---

This is the API overview page.

[
  { "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:

#Configuration

#overviewHeaders

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

Can be configured in _meta.json:

[
  {
    "type": "file",
    "name": "component",
    "overviewHeaders": [2, 3]
  }
]

Or in the article's frontmatter:

---
overviewHeaders: [2, 3]
---

#Nested overview pages

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

#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 to modify the styles of the OverviewGroup component, while continuing to use the built-in Overview page functionality:

---
overview: true
---

#Approach 2: fully custom page content

Use the OverviewGroup component with pageType: doc-wide to adjust the page layout and define content yourself:

---
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 },
        ],
      },
    ],
  }}
/>