InkUI
Components

Stepper

Multi-step wizard flow with visual progress indicator.

Show progress through a multi-step flow. Purely presentational — the parent manages which step is current.

Live Preview
Stepper · multi-step wizard
Install
2Configure
3Deploy
4Done
~/my-cli — node v22● running

Installation

npx inkui add stepper

Usage

import { Stepper } from './components/ui/stepper';
 
const steps = [
  { key: 'setup', title: 'Setup', description: 'Install dependencies' },
  { key: 'configure', title: 'Configure', description: 'Set API keys' },
  { key: 'deploy', title: 'Deploy', description: 'Push to production' },
];
 
export default function App() {
  return (
    <Stepper
      steps={steps}
      currentStep="configure"
      completedSteps={['setup']}
    />
  );
}

Step Indicators

StateSymbolColor
Completedsuccess (green)
Currentprimary (cyan)
Upcomingmuted
Errorerror (red)

API Reference

PropTypeDefaultDescription
stepsStep[]Step definitions (required)
currentStepstringCurrent step key (required)
orientation'horizontal' | 'vertical''horizontal'Layout direction
showNumbersbooleanfalseShow step numbers
completedStepsstring[][]Completed step keys
errorStepsstring[][]Error step keys
themeInkUIThemedarkThemeColor theme

On this page