---
title: Steps
description: Render numbered step-by-step instructions from Markdown headings or the Steps and Step components
type: reference
summary: Write consecutive headings that start with a number, such as "### 1. Install", to render a numbered step list. The Steps and Step components cover cases where a heading must be wrapped in another component.
url: /docs/components/steps
source: apps/template/content/docs/components/steps.mdx
prerequisites:
  - /docs/syntax
related:
  - /docs/syntax
  - /docs/table-of-contents
---

# Steps

Steps render sequential instructions as a numbered list with a counter beside each step heading. You write them as plain Markdown headings, so a page needs no imports and stays readable in Markdown output.

## Write steps as numbered headings

Start each step heading with a number, a period, and a space. Consecutive headings at the same depth that follow this pattern become one step list.

````md
## Deploy the project

### 1. Install the CLI

Install the Vercel CLI globally.

```bash
pnpm add -g vercel
```

### 2. Link the project

Run `vercel link` in the project directory and pick the team and project.

### 3. Deploy

Run `vercel deploy` to create a preview deployment.

## Next section
````

This renders as:

### 1. Install the CLI

Install the Vercel CLI globally.

```bash
pnpm add -g vercel
```

### 2. Link the project

Run `vercel link` in the project directory and pick the team and project.

### 3. Deploy

Run `vercel deploy` to create a preview deployment.

## How numbering and anchors work

Geistdocs removes the `1. ` prefix from the heading text at build time and draws the number with a CSS counter. As a result:

- The table of contents shows `Install the CLI`, not `1. Install the CLI`.
- The heading anchor is `#install-the-cli`, so renumbering steps does not break links.
- Custom anchors written as `### 1. Install the CLI [#install]` keep working.
- Markdown routes and `llms.txt` output numbered headings, such as `### 1. Install the CLI`, which read naturally for agents.

The numbers you write are only used to detect steps. Geistdocs always counts from 1, so `### 4. Deploy` at the start of a list renders as step 1.

## Rules for grouping steps

Geistdocs groups headings into a step list using these rules:

| Situation | Result |
| --- | --- |
| Consecutive numbered headings at the same depth | One step list |
| A deeper heading inside a step, such as `#### Options` under `### 2. Configure` | Part of the current step |
| A heading at the same or shallower depth without a number prefix | Ends the step list |
| A numbered heading where inline code or a link immediately follows the number, such as `` ### 1. `vercel login` `` | Not detected as a step; move a word before the code, such as `` ### 1. Run `vercel login` `` |

Paragraphs, lists, code blocks, callouts, and images between two step headings belong to the earlier step.

## Use the Steps and Step components

Use the components when a step heading has to be wrapped in another component, for example a framework switcher, and the heading pattern cannot be detected. Both components are in the default MDX component map and are exported from the selected package's `components/steps` subpath.

```mdx
<Steps>
  <Step>
    ### Install the package

    Run the install command for your package manager.
  </Step>
  <Step>
    ### Configure the project

    Add the configuration file to the project root.
  </Step>
</Steps>
```

This renders as:

<Steps>
  <Step>
    ### Install the package

    Run the install command for your package manager.
  </Step>
  <Step>
    ### Configure the project

    Add the configuration file to the project root.
  </Step>
</Steps>

Do not add a number prefix to headings inside `Step`. The component draws the counter, and a prefix would create a nested step list.

### Props

`Steps` and `Step` accept the standard `div` attributes. Both forward `className`, which is merged with the `fd-steps` and `fd-step` classes that carry the counter styling.

## Markdown output

In `.md` routes and `llms.txt`, each step list becomes plain numbered headings, such as `### 1. Install the CLI`, followed by the step content. This applies to steps written as headings and to steps written with `Steps` and `Step`, so agents read the same sequence without the wrapper markup.