Stepper

Multi-step progress indicator showing completed, active, and pending steps. Supports horizontal, vertical, and compact (icon-only) orientations.

Import

tsx

import { Stepper } from '@velocityuikit/velocityui'

Preview

Horizontal

AccountCreate your account

ProfileSet up your profile

BillingEnter payment info

ConfirmReview and submit

Vertical

AccountCreate your account

ProfileSet up your profile

BillingEnter payment info

ConfirmReview and submit

Props

Prop	Type	Default	Description
steps	`{ label: string; description?: string }[]`	—	Array of step definitions.
currentStep	`number`	—	The 1-indexed step that is currently active.
orientation	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout direction of the stepper.
variant	`'default' \| 'compact'`	`'default'`	Compact hides the label and description text.

Examples

Horizontal

tsx

import { Stepper } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <Stepper
      currentStep={2}
      steps={[
        { label: 'Account', description: 'Create your account' },
        { label: 'Profile', description: 'Set up your profile' },
        { label: 'Review', description: 'Confirm details' },
      ]}
    />
  )
}

Vertical

tsx

import { Stepper } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <Stepper
      orientation="vertical"
      currentStep={3}
      steps={[
        { label: 'Cart', description: 'Review your items' },
        { label: 'Shipping', description: 'Enter your address' },
        { label: 'Payment', description: 'Complete your purchase' },
        { label: 'Confirmation' },
      ]}
    />
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

css

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */