---
title: "ProseSteps"
description: "Transform headings into numbered step-by-step guides and tutorials."
canonical_url: "https://vinicunca.dev/pohon/typography/steps"
---
# ProseSteps

> Transform headings into numbered step-by-step guides and tutorials.

## Usage

Wrap your headings with the Steps component to display a list of steps.

Use the `level` prop to define which heading will be used for the steps.

````vue
<template>
  <steps level="4">
    <h4 id="add-the-pohon-ui-module-in-your-nuxtconfigts">
      Add the Pohon UI module in your 
      <code>
        nuxt.config.ts
      </code>
    </h4>
    <pre class="language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" code="export default defineNuxtConfig({
      modules: ['pohon-ui']
    });
    " filename="nuxt.config.ts" language="ts">
      <code>
        <span class="line" :line="1">
          <span class="s7zQu">
            export
          </span>
          <span class="s7zQu">
            default
          </span>
          <span class="s2Zo4">
            defineNuxtConfig
          </span>
          <span class="sTEyZ">
            (
          </span>
          <span class="sMK4o">
            {
          </span>
        </span>
        <span class="line" :line="2">
          <span class="swJcz">
            modules
          </span>
          <span class="sMK4o">
            :
          </span>
          <span class="sTEyZ">
            [
          </span>
          <span class="sMK4o">
            '
          </span>
          <span class="sfazB">
            pohon-ui
          </span>
          <span class="sMK4o">
            '
          </span>
          <span class="sTEyZ">
            ]
          </span>
        </span>
        <span class="line" :line="3">
          <span class="sMK4o">
            }
          </span>
          <span class="sTEyZ">
            )
          </span>
          <span class="sMK4o">
            ;
          </span>
        </span>
      </code>
    </pre>
    <h4 id="import-unocss-in-your-css">
      Import UnoCSS in your CSS
    </h4>
    <pre class="language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" code="``
    
    #### Start your development server
    
    ```bash
    npm run dev
    " filename="app/assets/css/main.css" language="css">
      <code>
        <span class="line" :line="1">
          <span class="sTEyZ">
            ``
          </span>
        </span>
        <span class="line" :line="2">
          <span :emptyLinePlaceholder="true" />
        </span>
        <span class="line" :line="3">
          <span class="sTEyZ">
            #### Start your development server
          </span>
        </span>
        <span class="line" :line="4">
          <span :emptyLinePlaceholder="true" />
        </span>
        <span class="line" :line="5">
          <span class="sTEyZ">
            ```bash
          </span>
        </span>
        <span class="line" :line="6">
          <span class="sTEyZ">
            npm run dev
          </span>
        </span>
      </code>
    </pre>
    <p>
      ::
    </p>
    <p>
      #code
    </p>
    <pre class="language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight" code="::steps{level=&quot;4&quot;}
    
    #### Add the Pohon UI module in your `nuxt.config.ts`
    
    ```ts [nuxt.config.ts]
    export default defineNuxtConfig({
      modules: ['pohon-ui']
    })
    ```
    
    #### Import UnoCSS in your CSS
    
    ```css [app/assets/css/main.css]
    ```
    
    #### Start your development server
    
    ```bash
    npm run dev
    ```
    
    ::
    " language="mdc">
      <code>
        <span class="line" :line="1">
          <span class="sMK4o">
            ::
          </span>
          <span class="swJcz">
            steps
          </span>
          <span class="sMK4o">
            {
          </span>
          <span class="spNyl">
            level
          </span>
          <span class="sMK4o">
            =
          </span>
          <span class="sMK4o">
            "
          </span>
          <span class="sfazB">
            4
          </span>
          <span class="sMK4o">
            "
          </span>
          <span class="sMK4o">
            }
          </span>
        </span>
        <span class="line" :line="2">
          <span :emptyLinePlaceholder="true" />
        </span>
        <span class="line" :line="3">
          <span class="sMK4o">
            ####
          </span>
          <span class="sBMFI">
            Add the Pohon UI module in your
          </span>
          <span class="sMK4o">
            `
          </span>
          <span class="sfazB">
            nuxt.config.ts
          </span>
          <span class="sMK4o">
            `
          </span>
        </span>
        <span class="line" :line="4">
          <span :emptyLinePlaceholder="true" />
        </span>
        <span class="line" :line="5">
          <span class="sfazB">
            ```
          </span>
          <span class="sJsPd">
            ts [nuxt.config.ts]
          </span>
        </span>
        <span class="line" :line="6">
          <span class="s7zQu">
            export
          </span>
          <span class="s7zQu">
            default
          </span>
          <span class="s2Zo4">
            defineNuxtConfig
          </span>
          <span class="sTEyZ">
            (
          </span>
          <span class="sMK4o">
            {
          </span>
        </span>
        <span class="line" :line="7">
          <span class="swJcz">
            modules
          </span>
          <span class="sMK4o">
            :
          </span>
          <span class="sTEyZ">
            [
          </span>
          <span class="sMK4o">
            '
          </span>
          <span class="sfazB">
            pohon-ui
          </span>
          <span class="sMK4o">
            '
          </span>
          <span class="sTEyZ">
            ]
          </span>
        </span>
        <span class="line" :line="8">
          <span class="sMK4o">
            }
          </span>
          <span class="sTEyZ">
            )
          </span>
        </span>
        <span class="line" :line="9">
          <span class="sfazB">
            ```
          </span>
        </span>
        <span class="line" :line="10">
          <span :emptyLinePlaceholder="true" />
        </span>
        <span class="line" :line="11">
          <span class="sMK4o">
            ####
          </span>
          <span class="sBMFI">
            Import UnoCSS in your CSS
          </span>
        </span>
        <span class="line" :line="12">
          <span :emptyLinePlaceholder="true" />
        </span>
        <span class="line" :line="13">
          <span class="sfazB">
            ```
          </span>
          <span class="sJsPd">
            css [app/assets/css/main.css]
          </span>
        </span>
        <span class="line" :line="14">
          <span class="sfazB">
            ```
          </span>
        </span>
        <span class="line" :line="15">
          <span :emptyLinePlaceholder="true" />
        </span>
        <span class="line" :line="16">
          <span class="sMK4o">
            ####
          </span>
          <span class="sBMFI">
            Start your development server
          </span>
        </span>
        <span class="line" :line="17">
          <span :emptyLinePlaceholder="true" />
        </span>
        <span class="line" :line="18">
          <span class="sfazB">
            ```
          </span>
          <span class="sJsPd">
            bash
          </span>
        </span>
        <span class="line" :line="19">
          <span class="sBMFI">
            npm
          </span>
          <span class="sfazB">
            run
          </span>
          <span class="sfazB">
            dev
          </span>
        </span>
        <span class="line" :line="20">
          <span class="sfazB">
            ```
          </span>
        </span>
        <span class="line" :line="21">
          <span :emptyLinePlaceholder="true" />
        </span>
        <span class="line" :line="22">
          <span class="sMK4o">
            ::
          </span>
        </span>
      </code>
    </pre>
    <p>
      :::
    </p>
    <h2 id="api">
      API
    </h2>
    <h3 id="props">
      Props
    </h3>
    <pre language="ts" code="/**
     * Props for the ProseProseSteps component
     */
    interface ProseProseStepsProps {
      /**
       * The heading level to apply to the steps.
       * @default '3'
       */
      level?: &quot;3&quot; | &quot;2&quot; | &quot;4&quot; | undefined;
      ui?: { base?: any; } | undefined;
    }" />
    <h3 id="slots">
      Slots
    </h3>
    <pre language="ts" code="/**
     * Slots for the ProseSteps component
     */
    interface ProseStepsSlots {
      default(): any;
    }" />
    <h2 id="theme">
      Theme
    </h2>
    <pre language="ts" code="export default defineAppConfig({
      ui: {
        prose: {}
      }
    })" filename="app.config.ts" />
    <h2 id="changelog">
      Changelog
    </h2>
    <p>
      See commit history for 
      <a href="https://github.com/vinicunca/pohon/commits/main/src/runtime/components/prose/ProseSteps.vue">
        component
      </a>
       and 
      <a href="https://github.com/vinicunca/pohon/commits/main/src/theme/prose/prose-steps.ts">
        theme
      </a>
      .
    </p>
  </steps>
</template>
````

---

- [GitHub](https://github.com/vinicunca/pohon/blob/main/src/runtime/components/prose/Steps.vue)


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.