---
title: "Pricing comparison"
description: "Every plan against every feature: a table on wide screens, one plan at a time on phones."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/pricing-comparison
---

# Pricing comparison

Every plan against every feature: a table on wide screens, one plan at a time on phones.

Wide frames show one table with the plans as columns, their prices and buttons in the header, and features grouped under headings with a check, a dash or a limit in each cell. Phones switch plans with tabs and list that plan's features as two columns, so nothing scrolls sideways. Ticks and dashes are read as Included and Not included. Pass your own plans and feature groups.

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-comparison
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, button, table, tabs

## 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