---
title: "Pricing tiers"
description: "Three plans under a Monthly/Yearly switch, with an enterprise strip below."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/pricing-tiers
---

# Pricing tiers

Three plans under a Monthly/Yearly switch, with an enterprise strip below.

Monthly or Yearly changes only the prices and the billing line under them, in fixed-width figures, so nothing on the page moves; the saving note is worked out from the plans and never claims more than every plan gives. The cards share rows, so prices, buttons and feature lists line up whatever the descriptions run to. Screen readers hear which prices are showing after each switch. Pass your own plans and enterprise strip, or null to drop the strip.

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/pricing-tiers
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, badge, button, card, separator, toggle-group

## Source

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

## More pricing blocks

All 4, with install commands: https://ui.edbn.me/docs/blocks/pricing · https://ui.edbn.me/docs/blocks/pricing.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