Stepper / Steps

Progress through a multi-step flow. Purely presentational: an ordered list with aria-current on the active step.

Import

import { Stepper } from '@marbleui/ui'

Props

<Stepper>

Prop	Type	Default	Description
current *required	`number`	`—`	Index of the current step; earlier steps render as complete.
steps *required	`Step[]`	`—`
className	`string`	`—`
orientation	`'vertical' \| 'horizontal'`	`'horizontal'`
variant	`'dots' \| 'numbered'`	`'numbered'`

Usage notes

Shows progress through a multi-step flow such as onboarding or checkout. It is display only, so for the form itself use your own buttons; for switchable views use Tabs.

<Stepper
  current={1}
  steps={[
    { title: 'Account', description: 'Email & password' },
    { title: 'Workspace' },
    { title: 'Done' },
  ]}
/>

current is a zero-based index; earlier steps show as complete, later ones as upcoming.
Not interactive: steps can’t be clicked. Drive current from your own Back/Continue buttons.
Renders an ol; the current step has aria-current="step" and each step carries screen-reader text “(completed)” or “(current)”.
orientation is horizontal (default) or vertical; variant is numbered (default) or dots.

Example source · show

import { useState } from 'react'
import { Button } from '../button'
import { Stepper } from './stepper'

const steps = [
  { title: 'Account', description: 'Email & password' },
  { title: 'Workspace', description: 'Name and URL' },
  { title: 'Invite', description: 'Add teammates' },
  { title: 'Done' },
]

function Horizontal() {
  const [i, setI] = useState(1)
  return (
    <div className="flex w-[34rem] flex-col items-center gap-6">
      <Stepper steps={steps} current={i} />
      <div className="flex gap-2">
        <Button variant="outline" isDisabled={i === 0} onPress={() => setI(i - 1)}>Back</Button>
        <Button isDisabled={i === steps.length - 1} onPress={() => setI(i + 1)}>Continue</Button>
      </div>
    </div>
  )
}

export const styles = {
  Horizontal,
  Vertical: () => <Stepper steps={steps} current={2} orientation="vertical" className="w-64" />,
  Dots: () => <Stepper steps={steps} current={1} variant="dots" className="w-[30rem]" />,
}

Source: packages/ui/src/stepper/stepper.tsx

Catalog