Stepper Component
React stepper component for wizards and checkouts. Horizontal and vertical orientation, clickable completed steps and done/active/pending states.
Import
1import { Stepper } from "@neuctra/ui";Basic Usage
activeStep is 0-based; earlier steps render as completed. With onStepClick, completed steps become clickable.
Cart
Shipping
Payment
Done
Vertical Orientation
Create account
Verify email
We sent you a link
Set up workspace
Many Steps (Responsive)
A horizontal Stepper with many steps doesn't try to squeeze every item into one row — the strip scrolls horizontally instead (drag it, or use onStepClick / arrow keys), and it keeps the active step scrolled into view automatically. Descriptions hide below the sm breakpoint so items stay compact on mobile. For a real multi-step flow, structure it as: Stepper (progress) → the current step's own content, rendered below it → Back/Next controls to move between steps.
Account
Profile
Company
Team
Workspace
Integrations
Billing
Preferences
Review
1. Account
Basic info — this is where that step's fields would render.
Props
All available props for the Stepper component.
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | StepperStep[] | — | Step definitions (required) |
| steps[].label | ReactNode | — | Step title |
| steps[].description | ReactNode | — | Muted line under the title |
| steps[].icon | ReactNode | step number | Custom marker content |
| activeStep | number | — | Current step index, 0-based (required) |
| onStepClick | (index: number) => void | — | Makes completed steps clickable |
| orientation | "horizontal" | "vertical" | "horizontal" | Layout direction |
| size | "sm" | "md" | "md" | Marker and text scale |
| itemClassName | string | — | Styles each individual step (indicator + content) wrapper |
| dotClassName | string | — | Styles the circular step indicator/dot |
| dotButtonClassName | string | — | Styles the button wrapping a clickable (completed) dot |
| connectorClassName | string | — | Styles the connector line between steps |
| contentClassName | string | — | Styles the wrapper around a step's label and description |
| labelClassName | string | — | Styles a step's label text |
| descriptionClassName | string | — | Styles a step's description text |
Accessibility
- The active step label carries aria-current="step".
- Clickable completed steps are real buttons with descriptive aria-labels and focus rings.
- Connector lines are decorative (aria-hidden).
Frequently Asked Questions
How do I install and import the Stepper component?
Install the @neuctra/ui package, then import it with: import { Stepper } from "@neuctra/ui";
What variants and sizes does Stepper support?
Stepper supports sizes: sm, md. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.
Is the Stepper component accessible?
Stepper is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.