# Indent

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

The `<Indent>` component adds left indentation with a vertical guide line. It's a subtle visual aid that helps maintain readability in long API pages with multiple levels of nested parameters, and for blockquotes.

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

<div>
  <div>
    <Indent>
      <div>
        This content is indented with a vertical guide line
      </div>

      <div>
        It's useful for showing hierarchical relationships
      </div>
    </Indent>
  </div>
</div>

```jsx Markdown
<Indent>
  <div>This content is indented with a vertical guide line</div>
  <div>It's useful for showing hierarchical relationships</div>
</Indent>
```

## Variants

### With other components

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

<div>
  <div>
    <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>
  </div>
</div>

```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 with its own guide line.

<div>
  <div>
    <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>
  </div>
</div>

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

<ParamField path="children" type="ReactNode" required={true}>
  The content to be indented. Can include any React elements, components, text, or markdown.
</ParamField>

<ParamField path="className" type="string" required={false}>
  Optional CSS class name for custom styling. The component includes a `fern-indent` class by default for targeting with custom styles.
</ParamField>