Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Drawer examples · Right

Right Drawer Shopping Cart for React

A right drawer shopping cart with three items, remove buttons, a subtotal, shipping and total, and Checkout.

Framework
UI library

A cart in a right drawer: three items with their variant, price and a remove button, then the subtotal, shipping and total, and Checkout with Continue Shopping in the footer. Shoppers check the cart without leaving the product they're on.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What does each cart item show?

An image placeholder, the name, the variant, the price and an icon-only remove button. The items come from a static array with an id each for the key.

How is the remove button labeled?

It's icon-only, so aria-label names the item, such as Remove Wireless Headphones. The trash icon is aria-hidden.

Are the totals calculated?

No, they're written out: $147.00, $10.00 and $157.00, in a description list. Compute them from your cart and format them with Intl.NumberFormat.

How does the Cart button open the drawer?

An outline button opens the drawer. Its text, Cart (3), is the accessible name. The Button goes in the render prop of DrawerTrigger. The cart icon before it is aria-hidden.

How does the drawer open from the right?

swipeDirection="right" on Drawer puts it on the right edge. The prop names the swipe that closes the drawer, so right docks it on the right; leave it out for a bottom drawer.

All 22 drawer examples