GitHub55X

Steps

Vue steps (stepper) to guide users through multi-step wizards and onboarding flows.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/steps.json

Usage

      
      <script setup lang="ts">
import { Steps } from "@/components/ui/steps";
</script>

<template>
  <Steps.Root>
    <!-- … -->
  </Steps.Root>
</template>

Composition

      
      Steps.Root
├── Steps.CompletedContent
├── Steps.Content
├── Steps.Context
├── Steps.Indicator
├── Steps.ItemContext
├── Steps.Item
├── Steps.List
├── Steps.NextTrigger
├── Steps.PrevTrigger
├── Steps.Progress
├── Steps.RootProvider
├── Steps.Separator
├── Steps.Trigger

Examples

Controlled

Using the RootProvider component, you can control the active step by using the step prop and handling the onStepChange event.

Root Provider

An alternative way to control the steps is to use the RootProvider component and the useSteps hook. This way you can access the state and methods from outside the component.

Vertical

Use the orientation prop to display the steps vertically.

Circular Progress

Show a circular progress indicator with the current step count (X/X), plus the title and description of the active step.

Linear Progress

Place a linear progress bar above the steps, synced to the completion percentage. The step list below omits separators.

API

See Ark UI Steps docs for full props and examples.

SplitterSwitch