diff --git a/fern/products/docs/pages/customization/custom-header-footer.mdx b/fern/products/docs/pages/customization/custom-header-footer.mdx
index 9f64208b0..4e3258094 100644
--- a/fern/products/docs/pages/customization/custom-header-footer.mdx
+++ b/fern/products/docs/pages/customization/custom-header-footer.mdx
@@ -61,10 +61,43 @@ Replace Fern's default header or footer with your own React components. Componen
   ```
 </Steps>
 
-## Advanced configuration
+## Built-in Fern components
 
-<AccordionGroup>
-<Accordion title="Header with dropdown menu">
+<Note title="Beta">
+  Built-in Fern components are in beta and subject to change.
+</Note>
+
+Custom header and footer components receive a `Fern` prop containing built-in UI components. This lets you compose custom layouts while reusing Fern's built-in primitives like search, navigation, and theme switching.
+
+```tsx components/CustomHeader.tsx
+export default function CustomHeader({ Fern }) {
+    return (
+        <header className="w-full py-4 px-6 flex items-center justify-between">
+            <Fern.Logo />
+            <Fern.Search />
+            <nav className="flex items-center gap-4">
+                <Fern.NavbarLinks />
+                <Fern.ThemeSwitch />
+            </nav>
+        </header>
+    );
+}
+```
+
+The following components are available on the `Fern` prop:
+
+| Component | Description |
+| --- | --- |
+| `<Fern.Logo />` | Your site logo as configured in `docs.yml`. Links to the homepage. |
+| `<Fern.Search />` | The search bar, including the AI search trigger if enabled. |
+| `<Fern.ProductSwitcher />` | Drop-down to switch between products (only renders if you have multiple products configured). |
+| `<Fern.VersionSwitcher />` | Drop-down to switch between API versions (only renders if you have versions configured). |
+| `<Fern.LanguageSwitcher />` | Drop-down to switch the active language. |
+| `<Fern.NavbarLinks />` | The navigation links configured under `navbar-links` in `docs.yml`. |
+| `<Fern.LoginButton />` | The login/signup button for authenticated docs. |
+| `<Fern.ThemeSwitch />` | Toggle between light and dark mode. |
+
+## Using React Hooks
 
 You can use React `useState` to build interactive headers with drop-down menus. Below is an example that renders a navigation bar with a "Products" drop-down that opens on click:
 
@@ -116,6 +149,3 @@ export default function CustomHeader() {
     );
 }
 ```
-
-</Accordion>
-</AccordionGroup>