stepper

Stepper

Numbered steps through a flow such as checkout, marking done, current and upcoming, joined by a line that fills as each step is done; spans its row, and on a narrow screen names only the current step.

States: Default, Focus, Disabled

Parts

Part	File	Does
Stepper	Stepper.vue	Groups all parts of the stepper, which guides the user through a sequence of steps.
StepperDescription	StepperDescription.vue	Explains in a short line what happens in a step.
StepperIndicator	StepperIndicator.vue	Marks the number or progress state of a step.
StepperItem	StepperItem.vue	Groups the trigger, title and description of one step in the stepper.
StepperSeparator	StepperSeparator.vue	Joins one step of the stepper to the next with a line that fills once the step is done.
StepperTitle	StepperTitle.vue	Names a step of the stepper.
StepperTrigger	StepperTrigger.vue	Lets the user jump to its step.

Anatomy

<Stepper>
  <StepperItem>
    <StepperTrigger>
      <StepperIndicator />
      <StepperTitle />
      <StepperDescription />
    </StepperTrigger>
    <StepperSeparator />
  </StepperItem>
</Stepper>

Styling

Part	Recipe
Stepper	stepper
Stepper	stepper-status
StepperDescription	stepper-description
StepperIndicator	stepper-indicator
StepperItem	stepper-item
StepperSeparator	stepper-separator-root
StepperSeparator	stepper-separator
StepperSeparator	stepper-separator-fill
StepperTitle	stepper-title
StepperTrigger	stepper-trigger

Install

Writes 8 files into components/ui/stepper/. For agents, npx @frontic/ui docs stepper prints this reference as markdown; the MCP server serves the same.

npm packages: @vueuse/core; class-variance-authority; reka-ui

API reference

Stepper Stepper.vue

Groups all parts of the stepper, which guides the user through a sequence of steps.

Prop	Type	Default
defaultValue	number	1

orientation	DataOrientation	'horizontal'

dir	Direction	—

modelValue	number	—

linear	boolean	true

asChild	boolean	false

as	AsTag \| Component	—
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default —
class	ClassValue	—

statusLabel	((step: number, total: number) => string)	`Step ${step} of ${total}`

Event	Payload
update:modelValue	payload: number \| undefined

Slot	Slot props
default	{ modelValue: number \| undefined; totalSteps: number; isNextDisabled: boolean; isPrevDisabled: boolean; isFirstStep: boolean; isLastStep: boolean; goToStep: (step: number) => void; nextStep: () => void; prevStep: () => void; hasNext: () => boolean; hasPrev: () => boolean; }

Data attribute	Values
data-horizontal	—

data-linear	—

data-orientation	'vertical' \| 'horizontal'

data-vertical	—

Recipe stepper	Sets
base: stepper	2 properties

Recipe stepper-status	Sets
base: stepper-status	2 properties

Parts

Anatomy

Styling

Install

API reference

Stepper Stepper.vue

StepperDescription StepperDescription.vue

StepperIndicator StepperIndicator.vue

StepperItem StepperItem.vue

StepperSeparator StepperSeparator.vue

StepperTitle StepperTitle.vue

StepperTrigger StepperTrigger.vue