> For AI agents: the complete documentation index is available at https://rspress.rs/llms.txt, the full documentation bundle is available at https://rspress.rs/llms-full.txt.

# HomeLayout

`HomeLayout` is the layout component for the [homepage](https://rspress.rs/guide/basic/home-page.md), responsible for integrating and rendering the Hero, Features, and Footer sections.

## Usage

Modify or override through [custom theme](https://rspress.rs/guide/basic/custom-theme.md):

```tsx title="theme/index.tsx"
import { HomeLayout as BasicHomeLayout } from '@rspress/core/theme-original';

export default function HomeLayout() {
  return <BasicHomeLayout />;
}
```

The `HomeLayout` component reads the `hero` and `features` configuration from frontmatter through [`useFrontmatter`](https://rspress.rs/ui/hooks/use-frontmatter.md). For detailed configuration options, refer to [Frontmatter Configuration](https://rspress.rs/api/config/config-frontmatter.md#hero).

### Custom slots

Use slot props to insert custom content before and after each section:

```tsx title="theme/index.tsx"
import { HomeLayout as BasicHomeLayout } from '@rspress/core/theme-original';

export default function HomeLayout() {
  return (
    <BasicHomeLayout
      beforeHero={<div>Content before Hero</div>}
      afterHero={<div>Content after Hero</div>}
      beforeFeatures={<div>Content before Features</div>}
      afterFeatures={<div>Content after Features</div>}
      beforeHeroActions={<div>Content before Hero buttons</div>}
      afterHeroActions={<div>Content after Hero buttons</div>}
    />
  );
}
```

## Props

### beforeHero

- **Type:** `React.ReactNode`

Custom content to insert before the Hero section.

### afterHero

- **Type:** `React.ReactNode`

Custom content to insert after the Hero section.

### beforeHeroActions

- **Type:** `React.ReactNode`

Custom content to insert before the Hero buttons, passed to the [HomeHero](https://rspress.rs/ui/layout-components/home-hero.md) component.

### afterHeroActions

- **Type:** `React.ReactNode`

Custom content to insert after the Hero buttons, passed to the [HomeHero](https://rspress.rs/ui/layout-components/home-hero.md) component.

### beforeFeatures

- **Type:** `React.ReactNode`

Custom content to insert before the Features section.

### afterFeatures

- **Type:** `React.ReactNode`

Custom content to insert after the Features section.

## Sub-components

`HomeLayout` uses the following components internally:

- [HomeBackground](https://rspress.rs/ui/layout-components/home-background.md) - Homepage background
- [HomeHero](https://rspress.rs/ui/layout-components/home-hero.md) - Hero section
- [HomeFeature](https://rspress.rs/ui/layout-components/home-feature.md) - Features section
- [HomeFooter](https://rspress.rs/ui/layout-components/home-footer.md) - Footer section