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

# Step

> Learn how to use the Steps component in Fern Docs to create sequential tutorials and walkthroughs with automatic numbering.

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. To pair steps with a code panel that follows the reader's position, use a [scroll walkthrough](/learn/docs/writing-content/components/scroll-walkthrough).

## Usage

Log in to your account and navigate to **Settings**.

Select **Change password** and enter a new password.

```jsx Markdown
<Steps>
  <Step>
    Log in to your account and navigate to **Settings**.
  </Step>
  <Step>
    Select **Change password** and enter a new password.
  </Step>
</Steps>
```

## Variants

### Steps with titles

Add titles to steps for better organization and clarity.

#### Install the Plants SDK

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

#### Get your garden API key

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

#### Initialize your garden client

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

```jsx Markdown
<Steps>
  <Step title="Install the Plants SDK">
    First, install the Plants API SDK using your package manager.
  </Step>
  <Step title="Get your garden API key">
    Sign up for a Plants API account and generate your garden access key.
  </Step>
  <Step title="Initialize your garden client">
    Import and set up the Plants client to start tracking your plants.
  </Step>
</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.

## Install the Plants SDK

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

## Configure your API key

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

## Initialize your garden client

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

```jsx Markdown
<Steps toc={true}>

## Install the Plants SDK

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

## Configure your API key

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

## Initialize your garden client

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

</Steps>
```

### Steps with nested components

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

#### 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.

#### Choose your watering schedule

Different plants have different watering needs.

#### Succulents

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

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.

#### 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.

```jsx Markdown
<Steps>
  <Step title="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.
  </Step>
  <Step title="Choose your watering schedule">
    Different plants have different watering needs.
    <AccordionGroup>
    <Accordion title="Succulents">
      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.
    </Accordion>
    <Accordion title="Tropical plants">
      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.
    </Accordion>
    </AccordionGroup>
  </Step>
  <Step title="Add your plant to the tracker">
    Log your plant in the system to get personalized care reminders and track growth over time.
    
    <Note>Remember to include your plant's location (indoor vs outdoor) and lighting conditions for accurate care recommendations.</Note>
  </Step>
</Steps>
```

## Properties

### `<Steps>` properties

**`toc`** `boolean`

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

When using [markdown headings](#steps-with-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](#steps-with-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.

```jsx Markdown
<Steps toc={true} tocDepth={2}>
  <Step title="First step">
    This step appears at depth 2 in the table of contents.
  </Step>
  <Step title="Second step">
    This step also appears at depth 2.
  </Step>
</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

---