Stepper

Stepper communicates a short, ordered process while keeping each step's content close to its navigation. It is currently used internally to structure manual component installation.

Use it for a small workflow where people may move directly between steps. It is not a progress tracker for background work or a substitute for route-level navigation.

Preview

Reduce motion:Off

Inspect

Add the package dependencies before copying the component source.

Installation

npx shadcn@latest add @sona-ui/stepper

Usage


export default function StepperDemo() {
  return (
    <Stepper defaultValue={1} orientation="vertical" className="max-w-xl">
      <StepperNav>
        <StepperItem step={1}>
          <StepperTrigger>
            <StepperIndicator>1</StepperIndicator>
            <StepperTitle>Install dependencies</StepperTitle>
          </StepperTrigger>
        </StepperItem>
        <StepperItem step={2}>
          <StepperTrigger>
            <StepperIndicator>2</StepperIndicator>
            <StepperTitle>Copy the files</StepperTitle>
          </StepperTrigger>
        </StepperItem>
      </StepperNav>
      <StepperPanel>
        <StepperContent value={1}>
          Add the package dependencies before copying the component source.
        </StepperContent>
        <StepperContent value={2}>
          Copy each component file into the matching location in your project.
        </StepperContent>
      </StepperPanel>
    </Stepper>
  );
}

Props

Property	Type	Default	Description
`children`	`ReactNode`	`required`	Step navigation and panels.
`value`	`number`	`—`	The active step in controlled mode.
`defaultValue`	`number`	`1`	The initially active step in uncontrolled mode.
`onValueChange`	`(value: number) => void`	`—`	Called when a user selects a different step.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The direction of the step navigation.

Accessibility

The step navigation is labeled and each trigger is a native button with current-step state. Keep step titles concise and preserve a logical reading order between the navigation and panels.

Styling

Use horizontal orientation for short labels and compact flows. Use vertical orientation when step titles need more room or when each panel contains substantial content.

Was this component useful?

Your feedback helps us improve the documentation.