Stepper

React SDK guidance for Stepper.

Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

Import path: @enadhq/enad-react-sdk/client/ui-resolver.
Live playground: /components/base-ui/stepper.

When to use it

Use Stepper when the visitor is moving through a known sequence and needs orientation inside that flow. It fits checkout, onboarding, and multi-step forms where the next stage is predictable.

If the visitor can jump freely between panels without a real sequence, Tabs is usually the clearer pattern.

Slot strategy

Stepper is a parent-led composition with five pieces:

Stepper controls the active step and orientation.
StepperItem wraps each stage in the sequence.
StepperTitle gives each stage a short label.
StepperDescription adds supporting detail when the labels need context.
StepperSeparator draws the connector between items.

Keep step titles short so the current position stays easy to scan.

Behavior and theming guidance

Use activeStep to reflect the current stage from your real flow state. Do not hard-code it in a way that can drift from the route or form logic.

Horizontal orientation works best for short labels and a small number of steps. Switch to vertical when descriptions matter or when the sequence needs more breathing room on narrower layouts.

Contract scope