Components

Pre-built UI components for rich documentation pages

Fern provides built-in components for common documentation patterns. Use them in the Fern Editor or directly in MDX files.

Callouts

Highlight important information with styled callouts.

This is a note callout. Use it for tips, warnings, or important context.

1 <Note>
2 This is a note callout.
3 </Note>

Cards

Use cards to link to other pages or highlight features.

First card

Cards can contain a short description

Second card

Add an href to make them clickable

1 <CardGroup cols={2}>
2   <Card title="First card" icon="duotone star">
3     Cards can contain a short description
4   </Card>
5   <Card title="Second card" icon="duotone rocket">
6     Add an href to make them clickable
7   </Card>
8 </CardGroup>

Accordions

Collapsible sections for FAQs or optional detail.

Click to expand

Hidden content is revealed when the user clicks.

1 <AccordionGroup>
2   <Accordion title="Click to expand">
3     Hidden content is revealed when the user clicks.
4   </Accordion>
5 </AccordionGroup>

Tabs

Organize content into switchable views.

JavaScript

Python

1 console.log("Hello");

1 <Tabs>
2   <Tab title="JavaScript">
3     console.log("Hello");
4   </Tab>
5   <Tab title="Python">
6     print("Hello")
7   </Tab>
8 </Tabs>

Steps

Walk users through a process.

Install the CLI

$ npm install -g fern-api

Preview your docs

$ fern docs dev

1 <Steps>
2   <Step title="Install the CLI">
3     npm install -g fern-api
4   </Step>
5   <Step title="Preview your docs">
6     fern docs dev
7   </Step>
8 </Steps>

Code blocks

Fern supports syntax-highlighted code blocks with optional titles.

example.py

1 def hello():
2     return "Hello, world!"

For the full list of components and detailed usage, see the Fern components documentation.

1	<CardGroup cols={2}>
2	<Card title="First card" icon="duotone star">
3	Cards can contain a short description
4	</Card>
5	<Card title="Second card" icon="duotone rocket">
6	Add an href to make them clickable
7	</Card>
8	</CardGroup>

1	<AccordionGroup>
2	<Accordion title="Click to expand">
3	Hidden content is revealed when the user clicks.
4	</Accordion>
5	</AccordionGroup>

1	<Tabs>
2	<Tab title="JavaScript">
3	console.log("Hello");
4	</Tab>
5	<Tab title="Python">
6	print("Hello")
7	</Tab>
8	</Tabs>

1	<Steps>
2	<Step title="Install the CLI">
3	npm install -g fern-api
4	</Step>
5	<Step title="Preview your docs">
6	fern docs dev
7	</Step>
8	</Steps>