Stepper

A cross-platform React stepper component that displays progress through a sequence of steps, supporting horizontal and vertical layouts with multiple step states.

Installation

npm install @xsolla/xui-stepper
# or
yarn add @xsolla/xui-stepper

Demo

Basic Stepper

import * as React from 'react';
import { Stepper } from '@xsolla/xui-stepper';

export default function BasicStepper() {
  const steps = [
    { title: 'Account', state: 'complete' as const },
    { title: 'Payment', state: 'current' as const },
    { title: 'Review', state: 'incomplete' as const },
  ];

  return <Stepper steps={steps} />;
}

Vertical Stepper

import * as React from 'react';
import { Stepper } from '@xsolla/xui-stepper';

export default function VerticalStepper() {
  const steps = [
    { title: 'Step 1', description: 'Account details', state: 'complete' as const },
    { title: 'Step 2', description: 'Payment method', state: 'current' as const },
    { title: 'Step 3', description: 'Order review', state: 'incomplete' as const },
  ];

  return <Stepper steps={steps} direction="vertical" />;
}

With States

import * as React from 'react';
import { Stepper } from '@xsolla/xui-stepper';

export default function StepStates() {
  const steps = [
    { title: 'Complete', state: 'complete' as const },
    { title: 'Warning', state: 'warning' as const },
    { title: 'Alert', state: 'alert' as const },
    { title: 'Loading', state: 'loading' as const },
    { title: 'Current', state: 'current' as const },
    { title: 'Incomplete', state: 'incomplete' as const },
  ];

  return <Stepper steps={steps} />;
}

Anatomy

import { Stepper } from '@xsolla/xui-stepper';

<Stepper
  steps={steps}              // Array of step objects
  direction="horizontal"     // horizontal or vertical
  size="md"                   // s or m
  variantUI="current"        // current or simple
  palette="brand"            // brand or brandSecondary
  tail={false}               // Show connecting line (simple variant)
  onClick={handleClick}      // Step click handler
  aria-label="Checkout"      // Accessible label
/>

Examples

Checkout Flow

import * as React from 'react';
import { Stepper } from '@xsolla/xui-stepper';

export default function CheckoutFlow() {
  const [currentStep, setCurrentStep] = React.useState(1);

  const steps = [
    { title: 'Cart', state: currentStep > 0 ? 'complete' as const : 'incomplete' as const },
    { title: 'Shipping', state: currentStep === 1 ? 'current' as const : currentStep > 1 ? 'complete' as const : 'incomplete' as const },
    { title: 'Payment', state: currentStep === 2 ? 'current' as const : currentStep > 2 ? 'complete' as const : 'incomplete' as const },
    { title: 'Confirm', state: currentStep === 3 ? 'current' as const : 'incomplete' as const },
  ];

  return (
    <div>
      <Stepper
        steps={steps}
        onClick={({ number }) => setCurrentStep(number)}
      />
      <div style={{ marginTop: 24 }}>
        <button onClick={() => setCurrentStep(Math.max(0, currentStep - 1))}>Back</button>
        <button onClick={() => setCurrentStep(Math.min(3, currentStep + 1))}>Next</button>
      </div>
    </div>
  );
}

Registration Steps

import * as React from 'react';
import { Stepper } from '@xsolla/xui-stepper';

export default function RegistrationSteps() {
  const steps = [
    { title: 'Email', description: 'Verify your email', state: 'complete' as const },
    { title: 'Profile', description: 'Set up your profile', state: 'current' as const },
    { title: 'Preferences', description: 'Customize settings', state: 'incomplete' as const },
  ];

  return (
    <Stepper
      steps={steps}
      direction="vertical"
      variantUI="current"
      size="md"
    />
  );
}

Simple Variant with Tail

import * as React from 'react';
import { Stepper } from '@xsolla/xui-stepper';

export default function SimpleStepper() {
  const steps = [
    { title: 'Step 1', state: 'complete' as const },
    { title: 'Step 2', state: 'current' as const },
    { title: 'Step 3', state: 'incomplete' as const },
  ];

  return <Stepper steps={steps} variantUI="simple" tail />;
}

Order Tracking

import * as React from 'react';
import { Stepper } from '@xsolla/xui-stepper';

export default function OrderTracking() {
  const steps = [
    { title: 'Order Placed', description: 'Jan 20, 2024', state: 'complete' as const },
    { title: 'Processing', description: 'Jan 21, 2024', state: 'complete' as const },
    { title: 'Shipped', description: 'In transit', state: 'loading' as const },
    { title: 'Delivered', state: 'incomplete' as const },
  ];

  return (
    <Stepper
      steps={steps}
      direction="vertical"
      palette="brand"
    />
  );
}

API Reference

Stepper

StepperProps:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | steps | StepType[] | - | Array of step definitions. | | direction | "horizontal" \| "vertical" | "horizontal" | Layout direction. | | size | "sm" \| "md" | "md" | Step size. | | variantUI | "current" \| "simple" | "current" | Visual variant. | | palette | "brand" \| "brandSecondary" | "brand" | Color palette. | | tail | boolean | false | Show connecting lines (simple variant). | | onClick | StepClickType | - | Step click handler. | | aria-label | string | - | Accessible label for stepper. |

StepType:

interface StepType {
  title: string | ReactElement;
  description?: string | ReactElement;
  state?: "current" | "incomplete" | "loading" | "complete" | "alert" | "warning";
  disabled?: boolean;
  key?: string;
  noClick?: boolean;
}

StepClickType:

type StepClickType = ({ number, step }: { number: number; step: StepType }) => void;

Step States

| State | Description | | :---- | :---------- | | current | Active step, highlighted with brand color | | complete | Finished step with checkmark | | incomplete | Future step, muted appearance | | loading | Step in progress with spinner | | alert | Error state with alert color | | warning | Warning state with warning color |

UI Variants

| Variant | Description | | :------ | :---------- | | current | Traditional stepper with step indicators and border line | | simple | Minimalist stepper with optional connecting tail |

Accessibility

• Stepper uses role="navigation" for semantic meaning
• Each step is keyboard accessible when clickable
• aria-label provides context for screen readers
• Step states are conveyed through visual and accessible means
• Disabled steps are properly announced