> 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.

# HomeFeature

This component is part of the [homepage](https://rspress.rs/guide/basic/home-page.md). `HomeFeature` renders a feature grid below the Hero section on the homepage.

## Usage

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

You can configure `features` in the frontmatter of your mdx file, and the component will automatically read it 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#features).

```tsx preview
import { HomeFeature as BasicHomeFeature } from '@rspress/core/theme-original';

export default function HomeFeature() {
  return <BasicHomeFeature />;
}
```

## Props

### features

- **Type:** `Feature[]`
- **Default:** Read from frontmatter

```ts
interface Feature {
  /**
   * Feature icon, supports:
   * - Emoji: '🚀'
   * - HTML string: '<span class="icon">...</span>'
   * - SVG string: '<svg>...</svg>'
   * - Image URL: '/icons/feature.svg' or 'https://example.com/icon.png'
   */
  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 clicking the card */
  link?: string;
}
```

- `span` controls how many grid columns each card occupies, total 12 columns
- `icon` supports emoji, HTML strings, SVG strings, and image URLs
- `details` supports HTML strings
- Setting `link` makes the card clickable for navigation