CartDrawer

Shopping cart slide-out drawer. Place once at site root level. Toggles open/closed via pagehub:toggle-cart event (fired by CartBadge or toggle-cart action). Shows cart items with quantity controls, subtotal, and checkout button.

Supports Children: any

Structure

Children: Container (header: title text + close Button with action toggle-cart), Container (footer: checkout Button with action cart-checkout + continue shopping Button with action toggle-cart). Cart items render automatically between header and footer from cart state. Quantity controls and remove buttons are component-rendered.

Properties

PropertyTypeDescriptionExamples
positionstring
right | left
Which side the drawer slides in from
Default: "right"
-
showBackdropboolean
Show a semi-transparent backdrop behind the drawer
Default: true
-
canDeleteboolean
-
Default: true
-
canEditNameboolean
-
Default: true
-
customobject
-
-
classNamestring
Tailwind classes for the drawer container
flex flex-col