Custom React components

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.

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
  };

Use the component in your docs

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:

1
// Absolute path from fern folder root
2
import { CustomCard } from "@/components/CustomCard"
3
4
// Or use a relative path
5
import { CustomCard } from "../components/CustomCard"
6
7
<CustomCard 
8
  title="MyTitle" 
9
  text="Hello" 
10
  href="https://github.com/fern-api/fern/tree/main/generators/python"
11
/>

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.

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.

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