> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://segat-elall.webland.sk/llms.txt.
> For full documentation content, see https://segat-elall.webland.sk/llms-full.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://segat-elall.webland.sk/_mcp/server.

# Components

Fern provides [built-in components](https://buildwithfern.com/learn/docs/writing-content/components/overview) 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.

```jsx
<Note>
This is a note callout.
</Note>
```

## Cards

Use cards to link to other pages or highlight features.

Cards can contain a short description

Add an `href` to make them clickable

```jsx
<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.

Hidden content is revealed when the user clicks.

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

## Tabs

Organize content into switchable views.

```js
console.log("Hello");
```

```python
print("Hello")
```

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

## Steps

Walk users through a process.

```bash
npm install -g fern-api
```

```bash
fern docs dev
```

```jsx
<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.

```python title="example.py"
def hello():
    return "Hello, world!"
```

***

For the full list of components and detailed usage, see the [Fern components documentation](https://buildwithfern.com/learn/docs/writing-content/components/overview).