---
title: "Steps"
description: "Transform headings into numbered step-by-step guides and tutorials."
canonical_url: "https://ui.nuxt.com/docs/typography/steps"
---
# Steps

> 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>
  <__flatten>
  <h4 id=add-the-nuxt-ui-module-in-your-nuxtconfigts>
  Add the Nuxt UI module in your 
  <code>
  nuxt.config.ts</code></h4>
  <pre className=language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=export default defineNuxtConfig({
    modules: ['@nuxt/ui']
  })
   filename=nuxt.config.ts language=ts meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <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>
  <span class=swJcz>
    modules</span>
  <span class=sMK4o>
  :</span>
  <span class=sTEyZ>
   [</span>
  <span class=sMK4o>
  '</span>
  <span class=sfazB>
  @nuxt/ui</span>
  <span class=sMK4o>
  '</span>
  <span class=sTEyZ>
  ]
  </span></span>
  <span class=line>
  <span class=sMK4o>
  }</span>
  <span class=sTEyZ>
  )
  </span></span></code></pre>
  <h4 id=import-tailwind-css-in-your-css>
  Import Tailwind CSS in your CSS</h4>
  <pre className=language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=@import "tailwindcss";
   filename=app/assets/css/main.css language=css meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=s7zQu>
  @import</span>
  <span class=sMK4o>
   "</span>
  <span class=sfazB>
  tailwindcss</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  ;
  </span></span></code></pre>
  <h4 id=start-your-development-server>
  Start your development server</h4>
  <pre className=language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=npm run dev
   language=bash meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sBMFI>
  npm</span>
  <span class=sfazB>
   run</span>
  <span class=sfazB>
   dev
  </span></span></code></pre></__flatten>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=::steps{level="4"}
  
  #### Add the Nuxt UI module in your `nuxt.config.ts`
  
  ```ts [nuxt.config.ts]
  export default defineNuxtConfig({
    modules: ['@nuxt/ui']
  })
  ```
  
  #### Import Tailwind CSS in your CSS
  
  ```css [app/assets/css/main.css]
  @import "tailwindcss";
  ```
  
  #### Start your development server
  
  ```bash
  npm run dev
  ```
  
  ::
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <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>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  #### </span>
  <span class=sBMFI>
  Add the Nuxt UI module in your </span>
  <span class=sMK4o>
  `</span>
  <span class=sfazB>
  nuxt.config.ts</span>
  <span class=sMK4o>
  `
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sfazB>
  ```</span>
  <span class=sJsPd>
  ts [nuxt.config.ts]
  </span></span>
  <span class=line>
  <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>
  <span class=swJcz>
    modules</span>
  <span class=sMK4o>
  :</span>
  <span class=sTEyZ>
   [</span>
  <span class=sMK4o>
  '</span>
  <span class=sfazB>
  @nuxt/ui</span>
  <span class=sMK4o>
  '</span>
  <span class=sTEyZ>
  ]
  </span></span>
  <span class=line>
  <span class=sMK4o>
  }</span>
  <span class=sTEyZ>
  )
  </span></span>
  <span class=line>
  <span class=sfazB>
  ```
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  #### </span>
  <span class=sBMFI>
  Import Tailwind CSS in your CSS
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sfazB>
  ```</span>
  <span class=sJsPd>
  css [app/assets/css/main.css]
  </span></span>
  <span class=line>
  <span class=s7zQu>
  @import</span>
  <span class=sMK4o>
   "</span>
  <span class=sfazB>
  tailwindcss</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  ;
  </span></span>
  <span class=line>
  <span class=sfazB>
  ```
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  #### </span>
  <span class=sBMFI>
  Start your development server
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sfazB>
  ```</span>
  <span class=sJsPd>
  bash
  </span></span>
  <span class=line>
  <span class=sBMFI>
  npm</span>
  <span class=sfazB>
   run</span>
  <span class=sfazB>
   dev
  </span></span>
  <span class=line>
  <span class=sfazB>
  ```
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span></code></pre></template>
</template>
```

## API

### Props

```ts
/**
 * Props for the ProseSteps component
 */
interface ProseStepsProps {
  /**
   * The heading level to apply to the steps.
   */
  level?: "3" | "2" | "4" | undefined;
  ui?: { base?: any; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Steps component
 */
interface StepsSlots {
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {
      steps: {
        base: 'ms-4 border-s border-default ps-8 [counter-reset:step]',
        variants: {
          level: {
            '2': '[&>h2]:[counter-increment:step] [&>h2]:relative [&>h2]:before:absolute [&>h2]:before:size-8 [&>h2]:before:bg-elevated [&>h2]:before:rounded-full [&>h2]:before:font-semibold [&>h2]:before:text-sm [&>h2]:before:tabular-nums [&>h2]:before:inline-flex [&>h2]:before:items-center [&>h2]:before:justify-center [&>h2]:before:ring-4 [&>h2]:before:ring-bg [&>h2]:before:-ms-[48.5px] [&>h2]:before:mt-0 [&>h2]:before:content-[counter(step)] [&>h2>a>span.absolute]:hidden',
            '3': '[&>h3]:[counter-increment:step] [&>h3]:relative [&>h3]:before:absolute [&>h3]:before:size-7 [&>h3]:before:inset-x-0.5 [&>h3]:before:bg-elevated [&>h3]:before:rounded-full [&>h3]:before:font-semibold [&>h3]:before:text-sm [&>h3]:before:tabular-nums [&>h3]:before:inline-flex [&>h3]:before:items-center [&>h3]:before:justify-center [&>h3]:before:ring-4 [&>h3]:before:ring-bg [&>h3]:before:-ms-[48.5px] [&>h3]:before:content-[counter(step)] [&>h3>a>span.absolute]:hidden',
            '4': '[&>h4]:[counter-increment:step] [&>h4]:relative [&>h4]:before:absolute [&>h4]:before:size-7 [&>h4]:before:inset-x-0.5 [&>h4]:before:bg-elevated [&>h4]:before:rounded-full [&>h4]:before:font-semibold [&>h4]:before:text-sm [&>h4]:before:tabular-nums [&>h4]:before:inline-flex [&>h4]:before:items-center [&>h4]:before:justify-center [&>h4]:before:ring-4 [&>h4]:before:ring-bg [&>h4]:before:-ms-[48.5px] [&>h4]:before:content-[counter(step)] [&>h4>a>span.absolute]:hidden'
          }
        },
        defaultVariants: {
          level: '3'
        }
      }
    }
  }
})
```

## Changelog

See commit history for [component](https://github.com/nuxt/ui/commits/v4/src/runtime/components/prose/Steps.vue) and [theme](https://github.com/nuxt/ui/commits/v4/src/theme/prose/steps.ts).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.