Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Right Drawer Shopping Cart for Vue

A right cart with headphones, a cable, and a case, a $157.00 total, Checkout, and Continue Shopping.

UI library: Ark UI

Cart (3) opens a right panel. Wireless Headphones, a USB-C cable, and a phone case each have a price and a remove button. The total reads $157.00, then Checkout and Continue Shopping.

Use it so shoppers can check the cart without leaving the product. A long cart belongs on a page, not in a Sheet. In Vue, Ark UI does not update the total.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Drawer anatomy: grabber, title, description, content, close

Usage

<Drawer swipeDirection="right">
  <DrawerTrigger :asChild="true">
    <Button variant="outline">
      <ShoppingCartIcon aria-hidden="true" data-icon="inline-start" />Cart (3)
    </Button>
  </DrawerTrigger>
  <DrawerContent :showBar="false">
    <DrawerHeader>
      <DrawerTitle>Shopping Cart</DrawerTitle>
      <DrawerDescription>3 items in your cart</DrawerDescription>
    </DrawerHeader>
    <div class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4">
      <ul class="flex flex-col gap-4">
        <li v-for="item in CART_ITEMS" class="flex gap-4 border-b pb-4" :key="item.id">
          <div class="size-20 shrink-0 rounded-md bg-muted"></div>
          <div class="flex flex-1 flex-col gap-1">
            <h3 class="font-medium text-sm">{{ item.name }}</h3>
            <p class="text-muted-foreground text-xs">{{ item.variant }}</p>
            <div class="flex items-center justify-between">
              <span class="font-medium text-sm">{{ item.price }}</span>
              <Button :aria-label="`Remove ${item.name}`" size="icon-xs" variant="ghost">
                <Trash2Icon aria-hidden="true" />
              </Button>
            </div>
          </div>
        </li>
      </ul>
      <dl class="flex flex-col gap-2 text-sm">
        <div class="flex justify-between">
          <dt class="text-muted-foreground">Subtotal</dt>
          <dd>$147.00</dd>
<!-- The rest of the file is under Installation. -->

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. DrawerTrigger takes asChild and merges onto the one Button inside it. 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.

API Reference

Drawer

Sets swipeDirection="right" and asChild. The rest is on the Drawer page.

Button

Sets variant="outline", aria-label="`Remove ${item.name}`", size="icon-xs" and variant="ghost". The rest is on the Button page.

All 22 drawer examples