🚧 Rspress 2.0 document is under development
close
Rspress
  • English

      • HomeHero 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. HomeHero renders the hero section on the home page.

      Usage

      Configure hero in the frontmatter of your mdx file:

      index.mdx
      ---
pageType: home
hero:
  badge: 'New'
  name: 'Rspress'
  text: 'Build docs fast'
  tagline: 'MDX-powered, Vite-speed docs framework'
  image:
    src: 'https://assets.rspack.rs/rspress/rspress-logo.svg'
    alt: 'Rspress'
  actions:
    - text: 'Get Started'
      link: '/guide/start/introduction'
      theme: 'brand'
    - text: 'GitHub'
      link: 'https://github.com/web-infra-dev/rspress'
      theme: 'alt'
---

      The component will automatically read the hero configuration from frontmatter.

      Custom slots

      Use beforeHeroActions and afterHeroActions props to insert custom content before and after the action buttons:

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

<HomeHero
  beforeHeroActions={<div>Content before buttons</div>}
  afterHeroActions={<div>Content after buttons</div>}
/>;

      Props

      beforeHeroActions

      • Type: React.ReactNode

      Custom content to insert before the Hero buttons.

      afterHeroActions

      • Type: React.ReactNode

      Custom content to insert after the Hero buttons.

      Hero configuration

      Here is the type definition for the hero field in frontmatter:

      interface Hero {
  /** Badge text at the top */
  badge?: string;
  /** Brand name, displayed with highlight style */
  name?: string;
  /** Main title text, supports multiple lines (separated by \n) */
  text?: string;
  /** Subtitle/tagline */
  tagline?: string;
  /** Hero image configuration */
  image?: {
    /** Image source, supports separate dark/light mode images */
    src?: string | { dark: string; light: string };
    /** Image alt text */
    alt?: string;
    /** Responsive image srcset attribute */
    srcset?: string | string[];
    /** Responsive image sizes attribute */
    sizes?: string | string[];
  };
  /** Action button list */
  actions?: {
    /** Button text */
    text: string;
    /** Button link */
    link: string;
    /** Button theme: brand (primary) or alt (secondary) */
    theme: 'brand' | 'alt';
  }[];
}
      • image.src supports configuring different images for dark/light modes
      • image.srcset and image.sizes are for responsive images, see MDN srcset documentation
      • name, text, and tagline all support HTML strings