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/empty-state.

When to use it

Use EmptyState when a view has no data to show: empty cart, empty wishlist, no search results, no reviews, or end of a paginated list. It provides a centered fallback with a message and optional recovery action.

Composition notes

EmptyState works in two modes:

• Preset mode: pass a variant like "empty-cart", "no-results", "no-reviews", "no-wishlist", or "end-of-list" to get built-in copy.
• Custom mode: pass title, description, and optionally icon for fully custom messaging.
• action is a ReactNode slot for a CTA button that helps the visitor recover (e.g., "Continue shopping", "Clear filters").

Both modes can be combined: a preset variant provides default copy, and custom props override specific fields.

Behavior and theming guidance

The component centers its content vertically and horizontally with generous padding. Keep the title short and the description actionable. The recovery action should always give visitors a clear next step.

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=EmptyState.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes