Skip to content
All 6 kits from $99 · Everything Bundle $149

Stepper

LayoutMIT
View in Storybook

OTF's React stepper marks the current stage in a multi-step flow with titles, optional descriptions, and horizontal or vertical layouts.

bun add @otfdashkit/ui

Preview

Stepper
Loading Storybook preview…

Code

import { Stepper } from '@otfdashkit/ui'

const stepDefs = [
  { title: 'Account',  description: 'Create your account' },
  { title: 'Profile',  description: 'Set up your profile' },
  { title: 'Billing',  description: 'Add payment method' },
  { title: 'Done',     description: 'Review and confirm' },
]

export function Example() {
  return (
    <Stepper currentStep={0} steps={stepDefs} className="max-w-2xl" />
  )
}

Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.

Kit for this component

Fitness Kit$99

Step users through a multi-step flow with visible progress.

See the kit

Props

Props declared in the Stepper source. Inherited HTML attributes are not listed.

PropTypeDefaultDescription
currentSteprequirednumber
stepsrequiredStepDef[]
classNamestring
direction'horizontal' | 'vertical''horizontal''horizontal' (default) | 'vertical' — vertical stacks steps as rows

Questions

How do I set the current step?
Import Stepper from @otfdashkit/ui and pass a zero-based currentStep index plus a steps array. Each step needs a title and may include a description.
Can the Stepper display vertically?
Yes. Set direction to "vertical"; the default direction is "horizontal".
Does Stepper handle form values or navigation?
No. Stepper displays progress from currentStep and steps; the parent application owns form state, validation, navigation, and submission.