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 source of truth 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.

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.