Indent

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

1 This text is not indented.
2 <Indent>
3   This text is indented.
4 </Indent>
5 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:

stringRequired

Unique identifier for the user

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.

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.

1	This text is not indented.
2	<Indent>
3	This text is indented.
4	</Indent>
5	This text is not indented again.

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>

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>