---
title: "Cart drawer with free shipping bar"
description: "A shop's cart in a sheet from the right, with a free-shipping bar, quantity steppers and Remove with Undo."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/cart-drawer
---

# Cart drawer with free shipping bar

A shop's cart in a sheet from the right, with a free-shipping bar, quantity steppers and Remove with Undo.

Cart opens the sheet, and Add on the shelf puts a piece in it and opens it on top. A bar under the title counts down to free shipping and says so once the order crosses the line. Each line's stepper stops at the pieces left. Remove leaves an Undo row in its place, with focus on Undo, until the sheet closes. The subtotal and the Checkout button's amount recompute as you go. With nothing left the cart says it's empty and offers Continue shopping.

A Pro block built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/cart-drawer
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, aspect-ratio, badge, button, number-field, progress, separator, sheet, spinner, text-link

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More cart & checkout blocks

All 5, with install commands: https://ui.edbn.me/docs/blocks/cart-and-checkout · https://ui.edbn.me/docs/blocks/cart-and-checkout.md

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt