Components | Zignal Labs

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.

<Note>
This is a note callout.
</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

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

Accordions

Collapsible sections for FAQs or optional detail.

Click to expand

Hidden content is revealed when the user clicks.

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

Tabs

Organize content into switchable views.

JavaScript

Python

console.log("Hello");

<Tabs>
  <Tab title="JavaScript">
    console.log("Hello");
  </Tab>
  <Tab title="Python">
    print("Hello")
  </Tab>
</Tabs>

Steps

Walk users through a process.

Install the CLI

npm install -g fern-api

Preview your docs

fern docs dev

<Steps>
  <Step title="Install the CLI">
    npm install -g fern-api
  </Step>
  <Step title="Preview your docs">
    fern docs dev
  </Step>
</Steps>

Code blocks

Fern supports syntax-highlighted code blocks with optional titles.

example.py

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

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