> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.barayuda.web.id/components/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.barayuda.web.id/_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.

> **Note**
>
> 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.

#### First card

Cards can contain a short description

#### Second card

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.

#### Click to expand

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.

#### JavaScript

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

#### Python

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

#### Install the CLI

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

#### Preview your docs

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

**`example.py`**

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

> Pre-built UI components for rich documentation pages