Writing contentComponents

Step

View as Markdown

The <Steps> component organizes sequential content with automatic numbering and anchor links. Use steps for tutorials, walkthroughs, setup guides, or any content that needs to be followed in order.

Usage

1

Log in to your account and navigate to Settings.

2

Select Change password and enter a new password.

Markdown
1<Steps>
2  <Step>
3    Log in to your account and navigate to **Settings**.
4  </Step>
5  <Step>
6    Select **Change password** and enter a new password.
7  </Step>
8</Steps>

Variants

Steps with titles

Add titles to steps for better organization and clarity.

1

Install the Plants SDK

First, install the Plants API SDK using your package manager.

2

Get your garden API key

Sign up for a Plants API account and generate your garden access key.

3

Initialize your garden client

Import and set up the Plants client to start tracking your plants.

Markdown
1<Steps>
2  <Step title="Install the Plants SDK">
3    First, install the Plants API SDK using your package manager.
4  </Step>
5  <Step title="Get your garden API key">
6    Sign up for a Plants API account and generate your garden access key.
7  </Step>
8  <Step title="Initialize your garden client">
9    Import and set up the Plants client to start tracking your plants.
10  </Step>
11</Steps>

Steps with markdown headings

You can also define steps using markdown headings instead of the <Step> component. Place ## or ### headings directly inside <Steps> and they are automatically converted into step titles with anchor links.

When toc={true} is set, each step’s position in the table of contents matches its heading level — ## headings appear at depth 2, ### at depth 3.

1

Install the Plants SDK

First, install the Plants API SDK using your package manager.

2

Configure your API key

Sign up for a Plants API account and generate your garden access key.

3

Initialize your garden client

Import and set up the Plants client to start tracking your plants.

Markdown
1<Steps toc={true}>
2
3## Install the Plants SDK
4
5First, install the Plants API SDK using your package manager.
6
7## Configure your API key
8
9Sign up for a Plants API account and generate your garden access key.
10
11## Initialize your garden client
12
13Import and set up the Plants client to start tracking your plants.
14
15</Steps>

Steps with nested components

Steps can contain rich content including callouts, accordions, code blocks, and other components.

1

Check your plant compatibility

Before adding a new plant to your garden, verify it will thrive in your climate. Most houseplants prefer temperatures between 65-75°F and moderate humidity.

2

Choose your watering schedule

Different plants have different watering needs.

Succulents and cacti store water in their leaves and stems, so they need infrequent watering. Water every 2-3 weeks, allowing the soil to dry out completely between waterings. Overwatering is the most common cause of succulent death.

Tropical plants like Monsteras, Pothos, and Philodendrons prefer consistent moisture. Water when the top inch of soil feels dry to the touch, typically once per week. These plants thrive in higher humidity environments.

3

Add your plant to the tracker

Log your plant in the system to get personalized care reminders and track growth over time.

Remember to include your plant’s location (indoor vs outdoor) and lighting conditions for accurate care recommendations.
Markdown
1<Steps>
2  <Step title="Check your plant compatibility">
3    Before adding a new plant to your garden, verify it will thrive in your climate. Most houseplants prefer temperatures between 65-75°F and moderate humidity.
4  </Step>
5  <Step title="Choose your watering schedule">
6    Different plants have different watering needs.
7    <AccordionGroup>
8    <Accordion title="Succulents">
9      Succulents and cacti store water in their leaves and stems, so they need infrequent watering. Water every 2-3 weeks, allowing the soil to dry out completely between waterings. Overwatering is the most common cause of succulent death.
10    </Accordion>
11    <Accordion title="Tropical plants">
12      Tropical plants like Monsteras, Pothos, and Philodendrons prefer consistent moisture. Water when the top inch of soil feels dry to the touch, typically once per week. These plants thrive in higher humidity environments.
13    </Accordion>
14    </AccordionGroup>
15  </Step>
16  <Step title="Add your plant to the tracker">
17    Log your plant in the system to get personalized care reminders and track growth over time.
18    
19    <Note>Remember to include your plant's location (indoor vs outdoor) and lighting conditions for accurate care recommendations.</Note>
20  </Step>
21</Steps>

Properties

<Steps> properties

toc
boolean

Whether to include steps in the table of contents. Defaults to false.

When using markdown headings inside <Steps>, the heading level controls where steps appear in the table of contents hierarchy. Use ## for depth 2 or ### for depth 3.

tocDepth
number

The depth at which steps appear in the table of contents when toc is enabled. Accepts 1, 2, or 3. Defaults to 3.

When using markdown headings, tocDepth is set automatically from the heading level. When using <Step> components, set this manually to control nesting in the table of contents.

Markdown
1<Steps toc={true} tocDepth={2}>
2  <Step title="First step">
3    This step appears at depth 2 in the table of contents.
4  </Step>
5  <Step title="Second step">
6    This step also appears at depth 2.
7  </Step>
8</Steps>

<Step> properties

title
string

Optional title for the step

id
string

The unique ID for the step. Used for linking and navigation. If not specified, an ID will be generated automatically.

className
string

Additional CSS classes to apply to the step