Components | hikamoru | Documentation

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.