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.

Add the Pohon UI module in your `nuxt.config.ts`

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['pohon-ui']
});

Create a config for UnoCSS and add the module

uno.config.ts

import { defineConfig } from 'unocss';

export default defineConfig({
});

Start your development server

pnpm run dev

::steps{level="4"}

#### Add the Pohon UI module in your `nuxt.config.ts`

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['pohon-ui']
})
```

#### Create a config for UnoCSS and add the module

```ts [uno.config.ts]
import { defineConfig } from 'unocss';

export default defineConfig({
});
```

#### Start your development server

```bash
npm run dev
```

::

API

Props

Prop	Default	Type

Slots

Slot	Type

Theme

We use unocss-variants to customize the theme. Read more about it in the theming guide.

Below is the theme configuration skeleton for the ProseSteps. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.

app.config.ts

export default defineAppConfig({
  pohon: {
    prose: {
      steps: {
        base: '',
        variants: {
          level: {
            '2': '',
            '3': '',
            '4': ''
          }
        },
        defaultVariants: {
          level: '3'
        }
      }
    }
  }
};

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    prose: {
      steps: {
        base: '',
        variants: {
          level: {
            '2': '',
            '3': '',
            '4': ''
          }
        },
        defaultVariants: {
          level: '3'
        }
      }
    }
  }
};

Changelog

No recent changes

Kbd

Display keyboard shortcuts and key combinations with proper styling.

Tabs

Organize related content in interactive tabbed interfaces.