Skip to contentSkip to Content
ComponentsSteps

Steps

Numbered step-by-step instructions with a vertical timeline. Steps are numbered automatically using CSS counters — you do not provide numbers manually. Use Steps for tutorials, setup guides, and any sequential process.

API

Steps

PropTypeDefaultDescription
childrenReactNode—One or more <Step> elements.

Step

PropTypeDefaultDescription
titlestring—The step heading.
childrenReactNode—The step content (text, code, components, etc.).

Example

Install the package

Run uv add my-lib to install.

Create a config file

Run my-lib init to generate a default configuration.

Start the server

Run my-lib serve to start the development server.

<Steps>
  <Step title="Install the package">
    Run `uv add my-lib` or `pip install my-lib` to install.
  </Step>
 
  <Step title="Create a config file">
    Run `my-lib init` to generate a default configuration.
  </Step>
 
  <Step title="Start the server">
    Run `my-lib serve` to start the development server on port 3000.
  </Step>
</Steps>
HookMapMermaid