From 19ce6efd44ef728089f009b1171f25fa94fe7f37 Mon Sep 17 00:00:00 2001 From: "fern-api[bot]" <115122769+fern-api[bot]@users.noreply.github.com> Date: Fri, 27 Feb 2026 00:04:22 +0000 Subject: [PATCH 1/4] docs: document built-in Fern components for custom header and footer --- .../customization/custom-header-footer.mdx | 63 +++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/fern/products/docs/pages/customization/custom-header-footer.mdx b/fern/products/docs/pages/customization/custom-header-footer.mdx index 9f64208b0..099940da6 100644 --- a/fern/products/docs/pages/customization/custom-header-footer.mdx +++ b/fern/products/docs/pages/customization/custom-header-footer.mdx @@ -61,9 +61,72 @@ Replace Fern's default header or footer with your own React components. Componen ``` +## Built-in Fern components + +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. Each component is rendered with standard JSX syntax and the `Fern` prop is always defined, so no null checks are needed. + +```tsx components/CustomHeader.tsx +export default function CustomHeader({ Fern }) { + return ( +
+ + + +
+ ); +} +``` + +The following components are available on the `Fern` prop: + +| Component | Description | +| --- | --- | +| `` | Your site logo as configured in `docs.yml`. Links to the homepage. | +| `` | The search bar, including the AI search trigger if enabled. | +| `` | Drop-down to switch between products (only renders if you have multiple products configured). | +| `` | Drop-down to switch between API versions (only renders if you have versions configured). | +| `` | Drop-down to switch the active language. | +| `` | The navigation links configured under `navbar-links` in `docs.yml`. | +| `` | The login/signup button for authenticated docs. | +| `` | Toggle between light and dark mode. | + ## Advanced configuration + + +You can mix built-in Fern components with your own custom navigation. This example keeps Fern's logo, search bar, and theme switch while adding custom links alongside them: + +```tsx components/CustomHeader.tsx +export default function CustomHeader({ Fern }) { + return ( +
+
+
+ + + +
+
+ +
+ +
+
+ ); +} +``` + + 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: From a2c71c4d6b1cf0a1c87f7f38f84c6ac99a604261 Mon Sep 17 00:00:00 2001 From: "fern-api[bot]" <115122769+fern-api[bot]@users.noreply.github.com> Date: Fri, 27 Feb 2026 00:11:38 +0000 Subject: [PATCH 2/4] docs: address review feedback on built-in Fern components --- .../customization/custom-header-footer.mdx | 39 +++---------------- 1 file changed, 6 insertions(+), 33 deletions(-) diff --git a/fern/products/docs/pages/customization/custom-header-footer.mdx b/fern/products/docs/pages/customization/custom-header-footer.mdx index 099940da6..ba1178832 100644 --- a/fern/products/docs/pages/customization/custom-header-footer.mdx +++ b/fern/products/docs/pages/customization/custom-header-footer.mdx @@ -63,7 +63,11 @@ Replace Fern's default header or footer with your own React components. Componen ## Built-in Fern components -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. Each component is rendered with standard JSX syntax and the `Fern` prop is always defined, so no null checks are needed. + + Built-in Fern components are in beta and subject to change. + + +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 }) { @@ -93,40 +97,9 @@ The following components are available on the `Fern` prop: | `` | The login/signup button for authenticated docs. | | `` | Toggle between light and dark mode. | -## Advanced configuration +## Using React Hooks - - -You can mix built-in Fern components with your own custom navigation. This example keeps Fern's logo, search bar, and theme switch while adding custom links alongside them: - -```tsx components/CustomHeader.tsx -export default function CustomHeader({ Fern }) { - return ( -
-
-
- - - -
-
- -
- -
-
- ); -} -``` - - 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: From 61b362d50cfcf55095f6344516b2a78c649a0a14 Mon Sep 17 00:00:00 2001 From: "fern-api[bot]" <115122769+fern-api[bot]@users.noreply.github.com> Date: Fri, 27 Feb 2026 00:53:44 +0000 Subject: [PATCH 3/4] docs: remove accordion wrapper from Using React Hooks section --- .../docs/pages/customization/custom-header-footer.mdx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/fern/products/docs/pages/customization/custom-header-footer.mdx b/fern/products/docs/pages/customization/custom-header-footer.mdx index ba1178832..4e3258094 100644 --- a/fern/products/docs/pages/customization/custom-header-footer.mdx +++ b/fern/products/docs/pages/customization/custom-header-footer.mdx @@ -99,9 +99,6 @@ The following components are available on the `Fern` prop: ## 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: ```tsx components/CustomHeader.tsx @@ -152,6 +149,3 @@ export default function CustomHeader() { ); } ``` - - - From 6cc327cba530fc2ff77a07ca7ba9cb1b31da4054 Mon Sep 17 00:00:00 2001 From: Devin Logan Date: Mon, 2 Mar 2026 11:33:57 -0500 Subject: [PATCH 4/4] small changes for structure/clarity --- .../customization/custom-header-footer.mdx | 39 +++++++++++-------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/fern/products/docs/pages/customization/custom-header-footer.mdx b/fern/products/docs/pages/customization/custom-header-footer.mdx index 4e3258094..32479da0c 100644 --- a/fern/products/docs/pages/customization/custom-header-footer.mdx +++ b/fern/products/docs/pages/customization/custom-header-footer.mdx @@ -9,6 +9,8 @@ description: Replace Fern's default header or footer with your own server-render 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. +## Replace the header or footer + ### Create your component @@ -61,13 +63,14 @@ Replace Fern's default header or footer with your own React components. Componen ``` -## Built-in Fern components +## Enhance your components + +Your custom components can use Fern's built-in UI primitives, React hooks, or both. - - Built-in Fern components are in beta and subject to change. - + + -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. +Instead of building every element from scratch, you can reuse Fern's built-in primitives like search, navigation, and theme switching. Custom header and footer components receive a `Fern` prop containing these built-in UI components: ```tsx components/CustomHeader.tsx export default function CustomHeader({ Fern }) { @@ -88,18 +91,18 @@ The following components are available on the `Fern` prop: | Component | Description | | --- | --- | -| `` | Your site logo as configured in `docs.yml`. Links to the homepage. | -| `` | The search bar, including the AI search trigger if enabled. | -| `` | Drop-down to switch between products (only renders if you have multiple products configured). | -| `` | Drop-down to switch between API versions (only renders if you have versions configured). | -| `` | Drop-down to switch the active language. | -| `` | The navigation links configured under `navbar-links` in `docs.yml`. | -| `` | The login/signup button for authenticated docs. | -| `` | 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: +| `` | Your site [logo](/docs/configuration/site-level-settings#logo-configuration) as configured in `docs.yml`. Links to the homepage. | +| `` | The [search](/docs/customization/search) bar, including the AI search trigger if enabled. | +| `` | Dropdown to switch between [products](/docs/configuration/products). | +| `` | Dropdown to switch between [versions](/docs/configuration/versions). | +| `` | Dropdown to switch the active [SDK language](/docs/configuration/site-level-settings#default-language). | +| `` | The [navigation links](/docs/configuration/site-level-settings#navbar-links-configuration) configured under `navbar-links` in `docs.yml`. | +| `` | The login/signup button for [authenticated docs](/docs/authentication/overview). | +| `` | Toggle between [light and dark mode](/docs/configuration/site-level-settings#theme-configuration). | + + + +Whether you build from scratch or use built-in Fern components, your custom header and footer components support standard React hooks. For example, you can use `useState` to build a drop-down menu that opens on click: ```tsx components/CustomHeader.tsx import { useState } from "react"; @@ -149,3 +152,5 @@ export default function CustomHeader() { ); } ``` + + \ No newline at end of file