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. For detailed configuration options of features, please refer to Frontmatter Config.

      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