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/wishlist.
• Live playground: /components/commerce/wishlist-drawer.

When to use it

Use WishlistDrawer when saved items should stay close to the browsing experience instead of living only on a dedicated route. Keep the drawer as a fast return point, not the full saved-items manager.

It works well for utility-nav access and save-for-later flows that often lead back into product exploration.

Composition notes

Like CartDrawer, this is a controlled overlay with isOpen and onClose. Add wishlistId when the surface should target a specific saved list and onMoveToCart when the flow supports quick transfer into the cart.

The live playground uses seeded wishlist data so the drawer anatomy stays visible without auth or server-backed mutations. The code sample above still shows the real integration shape for app runtime usage.

Behavior and theming guidance

Keep the drawer focused on saved-item review and the next likely step. If the wishlist experience grows beyond a short side panel, move the richer management flow to a full page.

Contract scope

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

Implementation notes