Header and footer

Create your component

Your component file must have a default export returning a React component. Tailwind CSS classes are available, including the dark: prefix for dark mode styles (e.g., dark:bg-gray-900, dark:text-gray-400):

1
export default function CustomFooter() {
2
    return (
3
        <footer className="w-full py-8 px-6 bg-gray-100 dark:bg-gray-900">
4
            <div className="max-w-7xl mx-auto">
5
                Plant Store API Documentation
6
            </div>
7
        </footer>
8
    );
9
}

Add the component paths to docs.yml

1
header: ./components/CustomHeader.tsx
2
footer: ./components/CustomFooter.tsx

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