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

## Usage

<div>
  <div>
    <Steps>
      <Step>
        Log in to your account and navigate to **Settings**.
      </Step>

      <Step>
        Select **Change password** and enter a new password.
      </Step>
    </Steps>
  </div>
</div>

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

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

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

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

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

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

<ParamField path="toc" type="boolean" required={false}>
  Whether to include the steps in the table of contents. Defaults to `false`.
</ParamField>

### `<Step>` properties

<ParamField path="title" type="string" required={false}>
  Optional title for the step
</ParamField>

<ParamField path="id" type="string" required={false}>
  The unique ID for the step. Used for linking and navigation. If not specified, an ID will be generated automatically.
</ParamField>

<ParamField path="className" type="string" required={false}>
  Additional CSS classes to apply to the step
</ParamField>