Steps Component

Use <Steps> and <Step> to present a sequence of instructions with clear progress indicators.

Basic Usage

1

Install the CLI

Install Relevate locally before creating or previewing your docs project.

2

Create Your Docs

Add your pages, configuration, and any reusable components you want to showcase.

3

Start the Preview

Run your local preview so you can review the flow step by step.

<Steps>

  <Step title="Install the CLI">

    Install Relevate locally before creating or previewing your docs project.

  </Step>

  <Step title="Create Your Docs">

    Add your pages, configuration, and any reusable components you want to showcase.

  </Step>

  <Step title="Start the Preview">

    Run your local preview so you can review the flow step by step.

  </Step>

</Steps>

Title Sizes

Set titleSize on Steps to control all child step titles (p, h2, or h3):

1

Install Dependencies

Install project dependencies before running the app.

2

Run the Preview

Start your docs preview server.

<Steps titleSize="h3">

  <Step title="Install Dependencies">

    Install project dependencies before running the app.

  </Step>

  <Step title="Run the Preview">

    Start your docs preview server.

  </Step>

</Steps>

Icons and Custom Numbers

Step supports icon and stepNumber:

10

Initialize Project

Create your base project structure.

Configure Docs

Add docs configuration and navigation.

<Steps>

  <Step title="Initialize Project" stepNumber={10}>

    Create your base project structure.

  </Step>

  <Step title="Configure Docs" icon="settings">

    Add docs configuration and navigation.

  </Step>

</Steps>

Per-Step Title Override

You can override titleSize for an individual step:

1

Default Step Size

This step uses the group default (p).

2

Overridden Step Size

This step overrides the group setting with h2.

<Steps titleSize="p">

  <Step title="Default Step Size">

    This step uses the group default (`p`).

  </Step>

  <Step title="Overridden Step Size" titleSize="h2">

    This step overrides the group setting with `h2`.

  </Step>

</Steps>

Available Options

Steps

children
ReactElement<StepProps>[]

Required. A list of Step components.

titleSize
'p' | 'h2' | 'h3'

Optional title size applied to all child steps unless a step overrides it.

Step

title
string
required

Required primary title text shown next to the step indicator.

icon
string

Optional icon name shown in the indicator instead of a number.

stepNumber
number

Optional explicit step number. If omitted, numbering is derived from order.

titleSize
'p' | 'h2' | 'h3'

Optional title size for this step.

Notes

Steps only renders Step children. Other child elements are ignored.

Full Image