Custom React Components

Add your own React components to enhance your docs

You can extend Fern’s built-in component library by adding your own custom React components. This allows you to create unique, interactive elements that match your documentation needs.

Setting up custom react components is part of the pro plan.

How does it work

1

Create a React component

Let’s start by creating a components folder where you can define your react components. Note that the react components can be defined in .ts, .tsx, .js or .mdx files.

components/CustomCard.tsx
1  export const CustomCard = ({ title, text, link, sparkle = false }) => {
2      return (
3          <a href={link} className="block p-6 rounded-lg border border-gray-200 hover:shadow-lg transition-shadow">
4          <h2 className="text-xl font-semibold mb-2">
5              {title} {sparkle && "✨"}
6          </h2>
7          <p className="text-gray-600">{text}</p>
8          </a>
9      );
10  };
2

Use the component in your docs

Once you’ve written the component, you can start leveraging it in your Markdown guides.

guide.mdx
1<CustomCard 
2  title="MyTitle" 
3  text="Hello" 
4  href="https://github.com/fern-api/fern/tree/main/generators/python"
5/>
3

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.

docs.yml
1experimental:
2  mdx-components:
3    - ./components

Why not just use custom CSS and JS instead?

While you can bundle React components as custom JavaScript, using Fern’s built-in React component support provides several key advantages:

When adding React components via custom JavaScript, you can’t control when components are rendered relative to the rest of the page content. This often leads to glitchy behavior where components flash or jump as they load asynchronously after the main content.

Custom JavaScript bundles typically include their own copy of the React library, which:

  • Increases page load time by duplicating React code that’s already included
  • Reduces performance as multiple React instances run on the same page
  • Creates larger bundle sizes that users have to download

Components added via custom JavaScript aren’t server-side rendered, which means search engines can’t index content.

Built with