> ## Documentation Index
> Fetch the complete documentation index at: https://www.usenotra.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Steps

> Number the steps of a setup or a tutorial.

`Steps` numbers the steps of a setup or a tutorial, with a title next to each number.

```mdx theme={"system"}
<Steps>
  <Step title="Connect GitHub">
    Install the GitHub App on the repository.
  </Step>
  <Step title="Add a post">
    Push `blog/hello-world.mdx`.
  </Step>
  <Step title="Go live">
    Every push to the production branch deploys the site.
  </Step>
</Steps>
```

<Frame caption="How it looks on your site">
  <img src="https://mintcdn.com/notra/_2RERYWY3HnUeONN/images/sites/components/steps-light.webp?fit=max&auto=format&n=_2RERYWY3HnUeONN&q=85&s=62272bab331b545127f18d73ba194835" alt="Three numbered steps on a Notra site" className="block dark:hidden" width="1824" height="510" data-path="images/sites/components/steps-light.webp" />

  <img src="https://mintcdn.com/notra/_2RERYWY3HnUeONN/images/sites/components/steps-dark.webp?fit=max&auto=format&n=_2RERYWY3HnUeONN&q=85&s=f667909907e5aaa4aa5fd07a3350db99" alt="Three numbered steps on a Notra site" className="hidden dark:block" width="1824" height="510" data-path="images/sites/components/steps-dark.webp" />
</Frame>

Notra numbers the steps in order, starting at 1.

## Props

### Step

<ResponseField name="title" type="string">
  The step's headline, next to its number.
</ResponseField>

`Steps` takes no props.

## Styling

The list carries the class `steps` and each item carries `step`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.