close
Rspress
  • English

      • OverviewGroup

      Warning

      This component is mainly used in conjunction with wrap/eject in Custom Theme , and is different from components that are directly imported in MDX. You can modify the styles and functions by passing component props or directly overriding the component. If you override the entire component through eject, please note that the reading of the corresponding configuration options of the component will become invalid and you need to control it yourself.

      OverviewGroup renders group cards in overview pages, displaying page lists and their heading anchors. It's part of the Overview page.

      Usage

      You can modify the component's styles through custom theme, or use OverviewGroup freely for UI display without relying on Rspress's built-in Overview page, for example:

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

<OverviewGroup
  group={{
    name: 'Usage Test',
    items: [
      {
        text: 'Introduction',
        link: '/guide/introduction',
        headers: [
          { id: 'what-is-rspress', text: 'What is Rspress', depth: 2 },
          { id: 'features', text: 'Features', depth: 2 },
        ],
      },
      {
        text: 'Installation',
        link: '/guide/installation',
      },
    ],
  }}
/>

      Usage Test

      Introduction
      Installation

      Props

      group

      • Type: Group
      • Required: Yes
      interface GroupItem {
  /** Item title */
  text: string;
  /** Item link */
  link: string;
  /** List of heading anchors within the page */
  headers?: Header[];
  /** Custom sub-items list */
  items?: { text: string; link: string }[];
}

interface Group {
  /** Group name */
  name: string;
  /** List of items in the group */
  items: GroupItem[];
}

interface Header {
  id: string;
  text: string;
  depth: number;
}
      • name - Group title, rendered as h2 heading
      • items - List of pages in the group
      • headers - Heading anchors within each page, clickable to jump to corresponding position
      • items (within GroupItem) - Custom sub-items, used to replace auto-extracted headers