---
title: "Cart & checkout blocks"
description: "5 Pro cart & checkout blocks for React. Carts, checkout steps and order summaries."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/cart-and-checkout
---

# Cart & checkout blocks

5 Pro cart & checkout blocks for React. Carts, checkout steps and order summaries.

## Installation

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 any block by name, for example:

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

## Blocks
- [Cart drawer with free shipping bar](https://ui.edbn.me/docs/blocks/cart-drawer): A shop's cart in a sheet from the right, with a free-shipping bar, quantity steppers and Remove with Undo.
  Install: `npx shadcn@4.19.0 add @edbn/cart-drawer`
- [Order summary with discount code](https://ui.edbn.me/docs/blocks/order-summary): A checkout's order summary: the pieces, a discount code field and totals that recompute, folding into a bar on phones.
  Install: `npx shadcn@4.19.0 add @edbn/order-summary`
- [Shipping address and method](https://ui.edbn.me/docs/blocks/shipping-method): A checkout's delivery step: the saved address with Edit, and ways to ship as option cards with dates and prices.
  Install: `npx shadcn@4.19.0 add @edbn/shipping-method`
- [Saved cards and new card form](https://ui.edbn.me/docs/blocks/payment-method): A checkout's payment step: saved cards as option cards and a new-card form that formats and checks what you type.
  Install: `npx shadcn@4.19.0 add @edbn/payment-method`
- [Order confirmation with progress](https://ui.edbn.me/docs/blocks/order-confirmation): The page after paying: the order number, the order's progress, what was paid, and where it's going.
  Install: `npx shadcn@4.19.0 add @edbn/order-confirmation`

All blocks: https://ui.edbn.me/docs/blocks · https://ui.edbn.me/docs/blocks.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