Skip to content
Blode.md

AI agents: fetch the documentation index at llms.txt. Markdown versions are available by appending .md to any page URL, including this page's markdown.

Steps

Display numbered step-by-step instructions.

Use the Steps and Step components to present sequential instructions. Each step is automatically numbered.

Basic usage

<Steps>
  <Step title="Install the CLI">
    Run the install command for your package manager:

    &#96;&#96;&#96;bash
    npm i -g blodemd
    &#96;&#96;&#96;

  </Step>
  <Step title="Create your project">
    Create a new docs project in the current directory:

    &#96;&#96;&#96;bash
    blodemd new
    &#96;&#96;&#96;

  </Step>
  <Step title="Start the dev server">
    Preview your documentation locally:

    &#96;&#96;&#96;bash
    blodemd dev
    &#96;&#96;&#96;

  </Step>
</Steps>
Install the CLI

Run the install command for your package manager:

npm i -g blodemd
Create your project

Create a new docs project in the current directory:

blodemd new
Start the dev server

Preview your documentation locally:

blodemd dev

Title sizing

Control the heading level of step titles with titleSize, either on individual steps or on the parent Steps component:

<Steps titleSize="h3">
  <Step title="Configure your project">
    Edit `docs.json` to set your project name and navigation.
  </Step>
  <Step title="Write your content">
    Create MDX files in the `docs/` directory.
  </Step>
</Steps>

Configure your project

Edit docs.json to set your project name and navigation.

Write your content

Create MDX files in the docs/ directory.

Props

Steps

FieldTypeDescriptionRequiredDefault
titleSize"p" | "h2" | "h3" | "h4"Default heading level for all child steps.Optional"p"
childrenReactNodeOne or more Step components.Yes

Step

FieldTypeDescriptionRequiredDefault
titlestringThe step heading text.Yes
iconReactNodeCustom icon to replace the step number.Optional
stepNumbernumberOverride the automatic step number.Optional
titleSize"p" | "h2" | "h3" | "h4"Heading level for this step. Overrides the parent value.Optional"p"
childrenReactNodeContent displayed below the step title.Optional