Stepper

AkarGitHub
A set of steps that are used to indicate progress through a multi-step process.

Usage

Use the Stepper component to display a list of items in a stepper.

Address
Add your address here
Shipping
Set your preferred shipping method
Checkout
Confirm your order
Step 0 of 0
<script setup lang="ts">
const items = ref([
  {
    title: 'Address',
    description: 'Add your address here',
    icon: 'i-lucide:house'
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method',
    icon: 'i-lucide:truck'
  },
  {
    title: 'Checkout',
    description: 'Confirm your order'
  }
])
</script>

<template>
  <PStepper :items="items" />
</template>

Items

Use the items prop as an array of objects with the following properties:

  • title?: string
  • description?: AvatarProps
  • content?: string
  • icon?: string
  • value?: string | number
  • disabled?: boolean
  • slot?: string
  • class?: any
  • pohon?: { item?: ClassNameValue, container?: ClassNameValue, trigger?: ClassNameValue, indicator?: ClassNameValue, icon?: ClassNameValue, separator?: ClassNameValue, wrapper?: ClassNameValue, title?: ClassNameValue, description?: ClassNameValue }
Address
Add your address here
Shipping
Set your preferred shipping method
Checkout
Confirm your order
Step 0 of 0
<script setup lang="ts">
import type { StepperItem } from 'pohon-ui'


const items = ref<StepperItem[]>([
  {
    title: 'Address',
    description: 'Add your address here',
    icon: 'i-lucide:house'
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method',
    icon: 'i-lucide:truck'
  },
  {
    title: 'Checkout',
    description: 'Confirm your order'
  }
])
</script>

<template>
  <PStepper :items="items" class="w-full" />
</template>
Click on the items to navigate through the steps.

Color

Use the color prop to change the color of the Stepper.

Address
Add your address here
Shipping
Set your preferred shipping method
Checkout
Confirm your order
Step 0 of 0
<script setup lang="ts">
import type { StepperItem } from 'pohon-ui'


const items = ref<StepperItem[]>([
  {
    title: 'Address',
    description: 'Add your address here',
    icon: 'i-lucide:house'
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method',
    icon: 'i-lucide:truck'
  },
  {
    title: 'Checkout',
    description: 'Confirm your order'
  }
])
</script>

<template>
  <PStepper color="neutral" :items="items" class="w-full" />
</template>

Size

Use the size prop to change the size of the Stepper.

Address
Add your address here
Shipping
Set your preferred shipping method
Checkout
Confirm your order
Step 0 of 0
<script setup lang="ts">
import type { StepperItem } from 'pohon-ui'


const items = ref<StepperItem[]>([
  {
    title: 'Address',
    description: 'Add your address here',
    icon: 'i-lucide:house'
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method',
    icon: 'i-lucide:truck'
  },
  {
    title: 'Checkout',
    description: 'Confirm your order'
  }
])
</script>

<template>
  <PStepper size="xl" :items="items" class="w-full" />
</template>

Orientation

Use the orientation prop to change the orientation of the Stepper. Defaults to horizontal.

Address
Add your address here
Shipping
Set your preferred shipping method
Checkout
Confirm your order
Step 0 of 0
<script setup lang="ts">
import type { StepperItem } from 'pohon-ui'


const items = ref<StepperItem[]>([
  {
    title: 'Address',
    description: 'Add your address here',
    icon: 'i-lucide:house'
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method',
    icon: 'i-lucide:truck'
  },
  {
    title: 'Checkout',
    description: 'Confirm your order'
  }
])
</script>

<template>
  <PStepper orientation="vertical" :items="items" class="w-full" />
</template>

Disabled

Use the disabled prop to disable navigation through the steps.

Address
Add your address here
Shipping
Set your preferred shipping method
Checkout
Confirm your order
Step 0 of 0
<script setup lang="ts">
import type { StepperItem } from 'pohon-ui'


const items = ref<StepperItem[]>([
  {
    title: 'Address',
    description: 'Add your address here',
    icon: 'i-lucide:house'
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method',
    icon: 'i-lucide:truck'
  },
  {
    title: 'Checkout',
    description: 'Confirm your order'
  }
])
</script>

<template>
  <PStepper disabled :items="items" />
</template>
This can be useful when you want to force navigation with controls.

Examples

With controls

You can add additional controls for the stepper using buttons.

Address
Add your address here
Shipping
Set your preferred shipping method
Checkout
Confirm your order
Address
Step 0 of 0
<script setup lang="ts">
import type { PStepperItem } from 'pohon-ui';
import { useTemplateRef } from 'vue';

const items: Array<PStepperItem> = [
  {
    title: 'Address',
    description: 'Add your address here',
    icon: 'i-lucide:house',
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method',
    icon: 'i-lucide:truck',
  },
  {
    title: 'Checkout',
    description: 'Confirm your order',
  },
];

const stepper = useTemplateRef('stepper');
</script>

<template>
  <div class="w-full">
    <PStepper
      ref="stepper"
      :items="items"
    >
      <template #content="{ item }">
        <CorePlaceholder class="aspect-video">
          {{ item.title }}
        </CorePlaceholder>
      </template>
    </PStepper>

    <div class="mt-4 flex gap-2 justify-between">
      <PButton
        leading-icon="i-lucide:arrow-left"
        :disabled="!stepper?.hasPrev"
        @click="stepper?.prev()"
      >
        Prev
      </PButton>

      <PButton
        trailing-icon="i-lucide:arrow-right"
        :disabled="!stepper?.hasNext"
        @click="stepper?.next()"
      >
        Next
      </PButton>
    </div>
  </div>
</template>

Control active item

You can control the active item by using the default-value prop or the v-model directive with the value of the item. If no value is provided, it defaults to the index as a string.

Address
Add your address here
Shipping
Set your preferred shipping method
Checkout
Confirm your order
This is the Address step.
Step 0 of 0
<script setup lang="ts">
import type { PStepperItem } from 'pohon-ui';
import { onMounted, ref } from 'vue';

const items: Array<PStepperItem> = [
  {
    title: 'Address',
    description: 'Add your address here',
    icon: 'i-lucide:house',
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method',
    icon: 'i-lucide:truck',
  },
  {
    title: 'Checkout',
    description: 'Confirm your order',
  },
];

const active = ref(0);

// Note: This is for demonstration purposes only. Don't do this at home.
onMounted(() => {
  setInterval(() => {
    active.value = (active.value + 1) % items.length;
  }, 2000);
});
</script>

<template>
  <PStepper
    v-model="active"
    :items="items"
    class="w-full"
  >
    <template #content="{ item }">
      <CorePlaceholder class="aspect-video">
        This is the {{ item?.title }} step.
      </CorePlaceholder>
    </template>
  </PStepper>
</template>

With content slot

Use the #content slot to customize the content of each item.

Address
Add your address here
Shipping
Set your preferred shipping method
Checkout
Confirm your order
This is the Address step.
Step 0 of 0
<script setup lang="ts">
import type { PStepperItem } from 'pohon-ui';

const items: Array<PStepperItem> = [
  {
    title: 'Address',
    description: 'Add your address here',
    icon: 'i-lucide:house',
  },
  {
    title: 'Shipping',
    description: 'Set your preferred shipping method',
    icon: 'i-lucide:truck',
  },
  {
    title: 'Checkout',
    description: 'Confirm your order',
  },
];
</script>

<template>
  <PStepper
    ref="stepper"
    :items="items"
    class="w-full"
  >
    <template #content="{ item }">
      <CorePlaceholder class="aspect-video">
        This is the {{ item?.title }} step.
      </CorePlaceholder>
    </template>
  </PStepper>
</template>

With custom slot

Use the slot property to customize a specific item.

You will have access to the following slots:

  • #{{ item.slot }}
Address
Add your address here
Shipping
Set your preferred shipping method
Checkout
Confirm your order
Address
Step 0 of 0
<script setup lang="ts">
import type { PStepperItem } from 'pohon-ui';

const items = [
  {
    slot: 'address' as const,
    title: 'Address',
    description: 'Add your address here',
    icon: 'i-lucide:house',
  },
  {
    slot: 'shipping' as const,
    title: 'Shipping',
    description: 'Set your preferred shipping method',
    icon: 'i-lucide:truck',
  },
  {
    slot: 'checkout' as const,
    title: 'Checkout',
    description: 'Confirm your order',
  },
] satisfies Array<PStepperItem>;
</script>

<template>
  <PStepper
    :items="items"
    class="w-full"
  >
    <template #address>
      <CorePlaceholder class="aspect-video">
        Address
      </CorePlaceholder>
    </template>

    <template #shipping>
      <CorePlaceholder class="aspect-video">
        Shipping
      </CorePlaceholder>
    </template>

    <template #checkout>
      <CorePlaceholder class="aspect-video">
        Checkout
      </CorePlaceholder>
    </template>
  </PStepper>
</template>

API

Props

Prop Default Type

Slots

Slot Type

Emits

Event Type

Expose

You can access the typed component instance using useTemplateRef.

<script setup lang="ts">
const stepper = useTemplateRef('stepper');
</script>

<template>
  <PStepper ref="stepper" />
</template>

This will give you access to the following:

NameType
next() => void
prev() => void
hasNextRef<boolean>
hasPrevRef<boolean>

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 PStepper. 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: {
    stepper: {
      slots: {
        root: '',
        header: '',
        item: '',
        container: '',
        trigger: '',
        indicator: '',
        icon: '',
        separator: '',
        wrapper: '',
        title: '',
        description: '',
        content: ''
      },
      variants: {
        orientation: {
          horizontal: {
            root: '',
            container: '',
            separator: '',
            wrapper: ''
          },
          vertical: {
            header: '',
            item: '',
            separator: ''
          }
        },
        size: {
          xs: {
            trigger: '',
            icon: '',
            title: '',
            description: '',
            wrapper: ''
          },
          sm: {
            trigger: '',
            icon: '',
            title: '',
            description: '',
            wrapper: ''
          },
          md: {
            trigger: '',
            icon: '',
            title: '',
            description: '',
            wrapper: ''
          },
          lg: {
            trigger: '',
            icon: '',
            title: '',
            description: '',
            wrapper: ''
          },
          xl: {
            trigger: '',
            icon: '',
            title: '',
            description: '',
            wrapper: ''
          }
        },
        color: {
          primary: {
            trigger: '',
            separator: ''
          },
          secondary: {
            trigger: '',
            separator: ''
          },
          success: {
            trigger: '',
            separator: ''
          },
          info: {
            trigger: '',
            separator: ''
          },
          warning: {
            trigger: '',
            separator: ''
          },
          error: {
            trigger: '',
            separator: ''
          },
          neutral: {
            trigger: '',
            separator: ''
          }
        }
      },
      compoundVariants: [],
      defaultVariants: {
        size: 'md',
        color: 'primary'
      }
    }
  }
};
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    stepper: {
      slots: {
        root: '',
        header: '',
        item: '',
        container: '',
        trigger: '',
        indicator: '',
        icon: '',
        separator: '',
        wrapper: '',
        title: '',
        description: '',
        content: ''
      },
      variants: {
        orientation: {
          horizontal: {
            root: '',
            container: '',
            separator: '',
            wrapper: ''
          },
          vertical: {
            header: '',
            item: '',
            separator: ''
          }
        },
        size: {
          xs: {
            trigger: '',
            icon: '',
            title: '',
            description: '',
            wrapper: ''
          },
          sm: {
            trigger: '',
            icon: '',
            title: '',
            description: '',
            wrapper: ''
          },
          md: {
            trigger: '',
            icon: '',
            title: '',
            description: '',
            wrapper: ''
          },
          lg: {
            trigger: '',
            icon: '',
            title: '',
            description: '',
            wrapper: ''
          },
          xl: {
            trigger: '',
            icon: '',
            title: '',
            description: '',
            wrapper: ''
          }
        },
        color: {
          primary: {
            trigger: '',
            separator: ''
          },
          secondary: {
            trigger: '',
            separator: ''
          },
          success: {
            trigger: '',
            separator: ''
          },
          info: {
            trigger: '',
            separator: ''
          },
          warning: {
            trigger: '',
            separator: ''
          },
          error: {
            trigger: '',
            separator: ''
          },
          neutral: {
            trigger: '',
            separator: ''
          }
        }
      },
      compoundVariants: [],
      defaultVariants: {
        size: 'md',
        color: 'primary'
      }
    }
  }
};

Akar

With Pohon UI, you can achieve similar component functionality with less code and effort, as it comes with built-in styles mechanism and behaviors that are optimized for common use cases. Since it's using unocss-variants it adds a runtime cost, but it can be worth it if you prioritize development speed and ease of use over fine-grained control.

If this is a deal breaker for you, you can always stick to using Akar and build your own custom components on top of it.

Changelog

No recent changes

Pagination

A list of buttons or links to navigate through pages.

Tabs

A set of tab panels that are displayed one at a time.