CmdocsCmdocs
Components

Steps

Create numbered step-by-step instructions.

Steps

Steps provide numbered, sequential instructions. Each <Step> is automatically numbered within its <Steps> container.

Basic Steps

Create your project — Start by creating a new directory and adding a docs.json file.

Write your content — Add MDX files for each page of your documentation.

Deploy — Connect your GitHub repository and deploy automatically.

<Steps>
  <Step>
    **Create your project** — Start by creating a new directory.
  </Step>
  <Step>
    **Write your content** — Add MDX files for each page.
  </Step>
  <Step>
    **Deploy** — Connect GitHub and deploy automatically.
  </Step>
</Steps>

Steps with Rich Content

Each step can contain headings, code blocks, callouts, and any other Markdown content.

Install the package

Choose your preferred package manager:

npm install my-package
bun add my-package
pnpm add my-package

Configure your project

Create a docs.json configuration file:

{
  "name": "My Project",
  "navigation": {
    "tabs": [
      {
        "label": "Docs",
        "path": "docs",
        "groups": [
          {
            "label": "Getting Started",
            "pages": [{ "file": "index" }]
          }
        ]
      }
    ]
  }
}

The navigation field is required. Without it, your site will have no sidebar.

Add your content

Your project structure should look like this:

docs.json
index.mdx
quickstart.mdx
setup.mdx

Props

<Steps>

Prop

Type

<Step>

Prop

Type

How is this guide?

On this page