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

When to use it

Use CartDrawer when visitors should be able to check cart state and move toward checkout without fully leaving the current browsing flow. It is a good fit for header cart buttons, quick-add experiences, and dense mobile browsing where a full cart page would feel heavy.

If the cart needs long-form editing, upsell modules, or more breathing room, a dedicated cart page is often the better surface.

Composition notes

CartDrawer is a controlled overlay. isOpen reflects the current shell state and onClose should always wire back to the same canonical reference as the trigger.

The typical pairing is CartTrigger plus CartDrawer, both connected to cart context. Keep labels centralized so count text, empty-state copy, and checkout actions stay consistent across the two surfaces.

Checkout is intentionally app-owned. Use checkoutHref when the checkout action should navigate to an app route such as /checkout. Use onCheckout when the app needs to start a hosted checkout, persist a checkout token, fire analytics, or run a custom redirect from the normalized cart. checkoutLoading and checkoutDisabled let the host app reflect that checkout handoff without moving checkout lifecycle into the SDK.

Behavior and theming guidance

Treat the drawer as a short decision surface. The visitor should be able to confirm what is in the cart, make small edits, and move on.

Because the drawer is an overlay, keep the internal content focused. If the implementation starts to need too many stacked modules, move that detail to the full cart route and keep the drawer concise.

Cart loading and mutation failures come from the cart hook and adapter. Apps that need shopper-facing retry copy should read the useCart error and retry helpers near the component that owns the recovery UX, rather than hiding that behavior inside the drawer.

Review notes

These notes define scoped usage boundaries without claiming exact prop or runtime truth beyond SDK package reference.

CartDrawer stays scoped to a short cart overlay. The drawer can present cart state, quick edits, and checkout direction; the app still owns the live cart backend, shell open-state orchestration, and runtime seams such as navigation, cookies, locale, and shopper identity.

• Wire live cart behavior at EnadProvider, then use Cart adapters when choosing the shipped Brink or mock adapter, or when hiding a custom backend behind the public CartAdapter seam.
• Keep framework-owned routing, cookie access, locale resolution, and shopper runtime config at the provider boundary described in Runtime adapters.
• If the cart needs long-form editing or dense supporting modules, move that work to the full cart route instead of turning the drawer into a cart application shell.

Contract scope

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

Implementation notes