Stepper

Akar GitHub

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.

color

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.

size

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.

orientation

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.

disabled

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
`as`	`'div'`	`any` The element or component this component should render as.
`items*`		`T[]`
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`color`	`'primary'`	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`orientation`	`'horizontal'`	`"horizontal" \| "vertical"` The orientation of the stepper.
`defaultValue`		`string \| number` The value of the step that should be active when initially rendered. Use when you do not need to control the state of the steps.
`modelValue`		`string \| number`
`disabled`		`boolean`
`linear`	`true`	`boolean` Whether or not the steps must be completed in order.
`pohon`		`{ root?: ClassValue; header?: ClassValue; item?: ClassValue; container?: ClassValue; trigger?: ClassValue; indicator?: ClassValue; icon?: ClassValue; separator?: ClassValue; wrapper?: ClassValue; title?: ClassValue; description?: ClassValue; content?: ClassValue; }`

Slots

Slot	Type
`indicator`	`{ item: T; pohon: object; }`
`wrapper`	`{ item: T; }`
`title`	`{ item: T; }`
`description`	`{ item: T; }`
`content`	`{ item: T; }`

Emits

Event	Type
`next`	`[value: T]`
`prev`	`[value: T]`
`update:modelValue`	`[value: string \| number]`

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:

Name	Type
`next`	`() => void`
`prev`	`() => void`
`hasNext`	`Ref<boolean>`
`hasPrev`	`Ref<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.