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. Components are server-side rendered for better SEO and performance, with no layout shifts.
Merge uses a custom React component to compare feature coverage across integrations in an interactive matrix.
Don’t use a React component to define a constant. Instead, consider using reusable snippets.
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.
Once you’ve written the component, you can import it in your Markdown guides using either a relative path or the @/ prefix for an absolute path from your fern folder root:
The @/ prefix resolves to the root of your fern folder, so @/components/CustomCard refers to fern/components/CustomCard. This is useful for nested MDX files where relative paths would be cumbersome (e.g., ../../../components/CustomCard). Both import styles are automatically transformed to relative paths at publish time.
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:
Custom React components are server-side rendered and fully indexable by search engines, while components added via custom JavaScript aren’t server-side rendered and can’t be indexed.