> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt.

# Indent

> Learn how to use the Indent component in Fern to add left indentation for nested parameters and hierarchical content.

The `<Indent>` component adds left indentation to create a subtle visual aid that helps maintain readability for blockquotes and long API pages with multiple levels of nested parameters.

Unlike the `<Folder>` component which only accepts `<File>` and `<Folder>` children, `<Indent>` works with all other components, including accordions, parameter fields, code blocks, and text.

## Usage

This text is not indented.

This text is indented.

This text is not indented again.

**`Markdown`**

```jsx Markdown
This text is not indented.
<Indent>
  This text is indented.
</Indent>
This text is not indented again.
```

## Variants

### With other components

Combine `<Indent>` with other components like accordions and parameter fields to organize complex hierarchical structures.

#### class User

**Properties:**

**`id`** `string` — required

Unique identifier for the user

---

**`email`** `string` — required

User's email address

---

**`name`** `string`

User's display name

---

**`Markdown`**

```jsx Markdown
<Accordion title="class User">
  <div><strong>Properties:</strong></div>
  <Indent>
    <ParamField path="id" type="string" required={true}>
      Unique identifier for the user
    </ParamField>
    <ParamField path="email" type="string" required={true}>
      User's email address
    </ParamField>
    <ParamField path="name" type="string">
      User's display name
    </ParamField>
  </Indent>
</Accordion>
```

### Multiple nesting levels

Nest `<Indent>` components multiple levels deep to show complex API parameter hierarchies. Each level adds another layer of indentation.

**`config`** `object` — required

Application configuration object

---

**`config.database`** `object` — required

Database connection settings

---

**`config.database.host`** `string` — required

Database server hostname

---

**`config.database.credentials`** `object` — required

Authentication credentials

---

**`config.database.credentials.username`** `string` — required

Database username

---

**`config.database.credentials.password`** `string` — required

Database password

---

**`config.cache`** `object`

Cache configuration

---

**`config.cache.ttl`** `number`

Time to live in seconds

---

**`Markdown`**

```jsx Markdown
<ParamField path="config" type="object" required={true}>
  Application configuration object
</ParamField>
<Indent>
  <ParamField path="config.database" type="object" required={true}>
    Database connection settings
  </ParamField>
  <Indent>
    <ParamField path="config.database.host" type="string" required={true}>
      Database server hostname
    </ParamField>
    <ParamField path="config.database.credentials" type="object" required={true}>
      Authentication credentials
    </ParamField>
    <Indent>
      <ParamField path="config.database.credentials.username" type="string" required={true}>
        Database username
      </ParamField>
      <ParamField path="config.database.credentials.password" type="string" required={true}>
        Database password
      </ParamField>
    </Indent>
  </Indent>
  <ParamField path="config.cache" type="object">
    Cache configuration
  </ParamField>
  <Indent>
    <ParamField path="config.cache.ttl" type="number">
      Time to live in seconds
    </ParamField>
  </Indent>
</Indent>
```

## Properties

**`children`** `ReactNode` — required

The content to be indented. Can include any React elements, components, text, or markdown.

---

**`className`** `string`

Optional CSS class name for custom styling. The component includes a `fern-indent` class by default for targeting with custom styles.

---

> Learn how to use the Indent component in Fern to add left indentation for nested parameters and hierarchical content.