# Steps
Use numbered steps to teach setup flows one action at a time, with anchors, custom numbers, icons, and heading-size control.
Source: /docs/components/steps
Last modified: 2026-06-20
Steps are for procedures where the reader should move in order. Use them for quickstarts, setup flows, launch checks, migration paths, and anything that should feel like a guided path instead of a wall of paragraphs.


> **Keep each step about one decision**
>

  A good step teaches one action, then lets the reader move on. Put optional detail in an `Expandable` or the next section instead of overloading the step body.


## Basic steps

This is the Mintlify-compatible baseline: one `Steps` wrapper with ordered `Step` children.


### First Step


    These are instructions or content that only pertain to the first step.


### Second Step


    These are instructions or content that only pertain to the second step.


### Third Step


    These are instructions or content that only pertain to the third step.


```mdx title="steps.mdx"


### First Step


    These are instructions or content that only pertain to the first step.


### Second Step


    These are instructions or content that only pertain to the second step.


### Third Step


    These are instructions or content that only pertain to the third step.


```

## Plandalf setup path


### Create a test offer


    Start with one offer that uses test mode, one product, and one price.


### Open checkout from one button


    Add a button to your site and connect it to the offer.


### Handle the result


    Redirect, unlock UI, or record analytics only after checkout returns a completed result.


### Steps MDX


```mdx title="steps-basic.mdx"


### Create a test offer


    Start with one offer that uses test mode, one product, and one price.


### Open checkout from one button


    Add a button to your site and connect it to the offer.


### Handle the result


    Redirect, unlock UI, or record analytics only after checkout completes.


```


## Step markers

Use `stepNumber` when imported MDX continues from an earlier sequence, or `icon` when a step needs a visual state rather than a number.


### Continue from a previous guide


    The next automatic step becomes `5`.


### Use an icon marker


    Icon steps are best for status summaries and short checklists.


### Hide the anchor


    Use `noAnchor` when the step is part of a short local pattern and should not appear as a direct target.


## Steps properties


- `children` (ReactElement<StepProps>[]; required):
  A list of `Step` components.


- `titleSize` (string; default: p):
  The size of the step titles. One of `p`, `h2`, `h3`, and `h4`.


## Individual step properties


- `title` (string; required):
  The title is the primary text for the step and shows up next to the indicator.


- `children` (string | ReactNode):
  The content of a step either as plain text or components.


- `icon` (string):
  The icon to display. Use a shared icon name, a Lucide, Font Awesome, or Tabler name, an image path, an external URL, or inline SVG.


- `iconType` (string):
  The Font Awesome icon style. Options include `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, and `brands`.


- `stepNumber` (number):
  The number of the step.


- `titleSize` (string; default: p):
  The size of the step title. One of `p`, `h2`, `h3`, and `h4`.


- `id` (string):
  A custom ID for the step, used for anchor linking and table of contents navigation.


- `noAnchor` (boolean; default: false):
  Whether to hide the anchor link for the step.


## Plandalf extensions


- `variant` ("line" | "cards" | "compact"; default: line):
  Chooses the visual treatment. Use `line` for Mintlify-style sequential docs, `compact` for short checklists, and `cards` only when every step needs a framed surface.


- `description` (string):
  Adds a short line of supporting text beneath the title.


## Related components


  - [Tabs and code groups](/docs/components/tabs-code-groups): Use switchers when the reader chooses a language, framework, or implementation style.
  - [Cards and tiles](/docs/components/cards-tiles): Use linked surfaces for navigation and visual previews after the reader knows what they need.