🚧 Rspress 2.0 document is under development
close
Rspress
  • English

      • HomeFeature eject-only

      Warning

      This component is an eject-only component, specifically designed for wrap/eject, and it's not recommended to be used directly in MDX files.

      This component is part of the Home Page. HomeFeature renders a feature grid below the hero section on the home page.

      Usage

      You can configure features in the frontmatter of your mdx file, and the component will automatically read it:

      index.mdx
      ---
pageType: home
features:
  - title: 'Fast'
    details: 'Rspress builds fast'
    icon: '⚡'
    span: 3
  - title: 'MDX First'
    details: 'MDX everywhere'
    icon: '🧩'
    span: 3
---

      Or pass it via props:

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

const features = [
  { title: 'Fast', details: 'Rspress builds fast', icon: '⚡', span: 3 },
  { title: 'MDX first', details: 'MDX everywhere', icon: '🧩', span: 3 },
];

<HomeFeature features={features} />;

      Props

      features

      • Type: Feature[]
      • Default: Read from frontmatter
      interface Feature {
  /** Feature icon, supports emoji or HTML string */
  icon: string;
  /** Feature title */
  title: string;
  /** Feature description, supports HTML string */
  details: string;
  /** Grid column span, supports 2, 3, 4, 6, defaults to 4 */
  span?: 2 | 3 | 4 | 6;
  /** Link to navigate when card is clicked */
  link?: string;
}
      • span controls how many grid columns each card occupies, out of 12 total columns
      • icon and details support HTML strings
      • Set link to make the card clickable