---
title: "Shipping address and method"
description: "A checkout's delivery step: the saved address with Edit, and ways to ship as option cards with dates and prices."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/shipping-method
---

# Shipping address and method

A checkout's delivery step: the saved address with Edit, and ways to ship as option cards with dates and prices.

Shows the saved address with Edit, which opens the address fields with autofill hints. Save checks them and Esc cancels. Each way to ship is an option card with its arrival dates, counted in working days, and its price. The local courier only reaches Portland ZIP codes, so it turns off when the address moves. Continue folds the step into a two-line summary with Edit, as a finished checkout step does.

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/shipping-method
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, button, field, input, radio-group, 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