# Steps (/components/steps)



Put your steps into the `Steps` container.

<Steps>
  <Step>
    ### Install packages [#install-packages]

    <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
        npm i fumadocs-core fumadocs-ui
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add fumadocs-core fumadocs-ui
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add fumadocs-core fumadocs-ui
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add fumadocs-core fumadocs-ui
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Step>

  <Step>
    ### Configure MDX components [#configure-mdx-components]

    Register components in `getMDXComponents`.
  </Step>

  <Step>
    ### Write content [#write-content]

    Use the components in your MDX files.
  </Step>
</Steps>