Shopping Cart Drawer

Slide-out cart. Pro · Shop and payments › Cart and orders

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add shopping-cart-drawer

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { ShoppingCartDrawer } from 'valyro-ui-pro';

Prop	Type	Default
`open`	`boolean`		Controlled `open`; use with `onOpenChange`.
`defaultOpen`	`boolean`	`false`	Initial `open` when uncontrolled.
`onOpenChange`	`(open: boolean) => void`		Called with the new `open` when it changes.
`value`	`CartLineItem[]`		Cart lines; quantity changes and removals go through `onValueChange`.
`defaultValue`	`CartLineItem[]`	`[]`	Initial `value` when uncontrolled.
`onValueChange`	`(items: CartLineItem[]) => void`		Called with the new `value` when it changes.
`currency`	`string`	`'USD'`	ISO 4217 code for every price in the drawer.
`freeShippingThreshold`	`number`		Subtotal (minor units) that unlocks free shipping; omit to hide the progress bar.
`onCheckout`	`(items: CartLineItem[]) => void`		Called by the Checkout button with the current cart lines.
`onContinueShopping`	`() => void`		Defaults to closing the drawer.
`title`	`ReactNode`	`'Your cart'`	Drawer heading; also its accessible name.
`inline`	`boolean`	`false`	Render the panel in the page flow instead of a modal drawer — a cart column on a checkout page, the body of a mini-cart popover, a static preview. It fills its container's height; `open` and the close button do not apply, and "Continue shopping" shows only with `onContinueShopping`.
`locale`	`string`		Locale for prices and counts (default: the ThemeProvider's, then the browser's).
`labels`	`Partial<ShoppingCartDrawerLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Checkout Summary — Order summary at checkout
Checkout Form — Checkout: shipping, address type, payment and field validation
Order Tracking — Order tracking: stages, carrier, tracking number and history
Invoice — Printable invoice: line items, taxes, discounts and totals in any currency
Product Card — Product card
Product Grid — Product catalog
Product Filters — Catalog filters
Product Spotlight — Featured product: tagged photo, price, rating and actions
Reviews Summary — Reviews: average rating, filterable histogram, sorting and helpful votes
Guided Product Finder — Product finder wizard: branching questions and why a product fits
Location Card — Store location: distance, opening hours, pickup options and ordering
Credit Card — Bank card: gradient or two-tone, network detected from the number, contactless