---
title: "Steps"
description: "Numbered steps for guides and tutorials, as components or with remark-steps."
url: https://docscn.dev/docs/components/steps
lastModified: 2026-10-09T09:13:37.000Z
---

# Steps (/docs/components/steps)

> Numbered steps for guides and tutorials, as components or with remark-steps.

<Steps>
  <Step>
    ### Install the registry [#install-the-registry]

    Add `@docscn` to your `components.json`.
  </Step>

  <Step>
    ### Add the components [#add-the-components]

    Install `@docscn/docs`.
  </Step>
</Steps>

## Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add @docscn/steps
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add @docscn/steps
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add @docscn/steps
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add @docscn/steps
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Usage [#usage]

```mdx
import { Step, Steps } from "@/components/docs/components/steps";

<Steps>
  <Step>
    ### Install the registry

    Add `@docscn` to your `components.json`.

  </Step>
  <Step>
    ### Add the components

    Install `@docscn/docs`.

  </Step>
</Steps>
```

The `docs` block adds `Steps` and `Step` to your MDX components.

## remark-steps [#remark-steps]

Fumadocs' opt-in `remark-steps` plugin turns headings such as `### 1. Install` into steps, by wrapping them in `div`s with the `fd-steps` and `fd-step` classes. Installing `steps` adds the styles for those classes to your global stylesheet, so the plugin's output renders the same as the components.