E-Commerce

Cart Drawer

Right-docked cart drawer on desktop and a three-snap-point bottom sheet on mobile, with no backdrop-blur scrim, focus trap and Escape to close.

Subscription Included with the Velocity Components subscription.

bash

$ velocityx add cart-drawer

Built for react. Needs react, react-dom already installed as peer dependencies. An Astro-only project needs @astrojs/react wired up first — this won't run on its own in plain Astro.

Full docs for Cart Drawer →

Needs a licence key — subscribe here, then velocityx loginonce.

react v1.0.0 react react-dom

Cart Drawer

Catalogue page (behind the drawer)

Props

Name	Type	Required	Default	Description
open	boolean	Yes
onClose	() => void	Yes
items	{ id, title, variant?, image?, price, qty, currency? }[]	No	[]
onQtyChange	(id, nextQty) => void	Yes
onRemove	(id) => void	Yes
subtotal	number	No	0
shipping	number \| null	No	null	null hides the row (unknown until checkout)
tax	number?	Yes
discount	number?	Yes
total	number	No	0
currency	string	No	'AUD'
locale	string	No	'en-AU'
checkoutHref	string	No	'/checkout'
continueShoppingHref	string?	Yes

File this creates

The CLI writes this path into your project, relative to its root — nothing else moves.

text

components/velocity/cart-drawer/CartDrawer.jsx

Using the Cart Drawer component

Install it with velocityx add cart-drawer. The CLI writes the source straight into your project — no runtime dependency, no registry lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.

All 406 components

Cart Drawer

Props

File this creates

Using the Cart Drawer component

Related components