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/storefront.
• Live playground: /components/commerce/checkout-stepper.

When to use it

Use CheckoutStepper when the purchase flow spans several distinct stages and the customer benefits from seeing progress and back-navigation context.

Composition notes

Pass a stable steps array with completed, active, and upcoming statuses. Only completed steps become clickable, so onStepClick should map back to safe earlier points in the flow.

Use durable step ids that match your router or checkout state machine so the click handler can send customers back to the exact stage you expect. The component is clearest with three to five steps. If your internal flow is more detailed than that, group smaller steps under broader customer-facing labels.

Behavior and theming guidance

Keep labels short so the stepper stays readable on smaller screens. The component already shifts emphasis across step states, so focus on feeding it accurate flow state rather than restyling the internal markers.

On smaller screens the labels are hidden and the numbered markers carry most of the context. Put the stepper close to the page heading or step title so customers do not lose orientation when only the markers remain visible.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/storefront.
• Playground route: /sandbox?component=CheckoutStepper.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes