# Header and footer

> Replace Fern's default header or footer with your own server-rendered React components for better SEO and performance.

<Warning title="Pro and Enterprise feature">
  This feature is available only for the [Pro and Enterprise plans](https://buildwithfern.com/pricing). To get started, reach out to [support@buildwithfern.com](mailto:support@buildwithfern.com).
</Warning>

Replace Fern's default header or footer with your own React components. Components are server-side rendered for better SEO and performance, with no layout shifts.

<Steps>
  ### Create your component

  Your component file must have a default export returning a React component. Tailwind CSS classes are available, including the `dark:` prefix for dark mode styles (e.g., `dark:bg-gray-900`, `dark:text-gray-400`):

  ```tsx components/CustomFooter.tsx
  export default function CustomFooter() {
      return (
          <footer className="w-full py-8 px-6 bg-gray-100 dark:bg-gray-900">
              <div className="max-w-7xl mx-auto">
                  Plant Store API Documentation
              </div>
          </footer>
      );
  }
  ```

  ### Add the component paths to `docs.yml`

  ```yaml docs.yml
  header: ./components/CustomHeader.tsx
  footer: ./components/CustomFooter.tsx
  ```

  ### Specify your components directory in `docs.yml`

  Add your components directory to `docs.yml` so that the Fern CLI can scan your components directory and upload them to the server.

  ```yml docs.yml
  experimental:
    mdx-components:
      - ./components
  ```
</Steps>