Writing contentComponents

Indent

View as Markdown

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

This content is indented with a vertical guide line
It’s useful for showing hierarchical relationships
Markdown
1<Indent>
2  <div>This content is indented with a vertical guide line</div>
3  <div>It's useful for showing hierarchical relationships</div>
4</Indent>

Variants

With other components

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

Properties:
id
stringRequired

Unique identifier for the user

email
stringRequired

User’s email address

name
string

User’s display name

Markdown
1<Accordion title="class User">
2  <div><strong>Properties:</strong></div>
3  <Indent>
4    <ParamField path="id" type="string" required={true}>
5      Unique identifier for the user
6    </ParamField>
7    <ParamField path="email" type="string" required={true}>
8      User's email address
9    </ParamField>
10    <ParamField path="name" type="string">
11      User's display name
12    </ParamField>
13  </Indent>
14</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.

config
objectRequired

Application configuration object

config.database
objectRequired

Database connection settings

config.database.host
stringRequired

Database server hostname

config.database.credentials
objectRequired

Authentication credentials

config.database.credentials.username
stringRequired

Database username

config.database.credentials.password
stringRequired

Database password

config.cache
object

Cache configuration

config.cache.ttl
number

Time to live in seconds

Markdown
1<ParamField path="config" type="object" required={true}>
2  Application configuration object
3</ParamField>
4<Indent>
5  <ParamField path="config.database" type="object" required={true}>
6    Database connection settings
7  </ParamField>
8  <Indent>
9    <ParamField path="config.database.host" type="string" required={true}>
10      Database server hostname
11    </ParamField>
12    <ParamField path="config.database.credentials" type="object" required={true}>
13      Authentication credentials
14    </ParamField>
15    <Indent>
16      <ParamField path="config.database.credentials.username" type="string" required={true}>
17        Database username
18      </ParamField>
19      <ParamField path="config.database.credentials.password" type="string" required={true}>
20        Database password
21      </ParamField>
22    </Indent>
23  </Indent>
24  <ParamField path="config.cache" type="object">
25    Cache configuration
26  </ParamField>
27  <Indent>
28    <ParamField path="config.cache.ttl" type="number">
29      Time to live in seconds
30    </ParamField>
31  </Indent>
32</Indent>

Properties

children
ReactNodeRequired

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.