---
title: "Single plan pricing"
description: "One plan, centred: a Monthly/Yearly switch, the price and trial button beside a two-column list of what's included."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/pricing-single
---

# Single plan pricing

One plan, centred: a Monthly/Yearly switch, the price and trial button beside a two-column list of what's included.

A segmented Monthly/Yearly switch sits under the heading with the yearly saving beside it. Both prices share one cell and the billing line keeps its length, so switching moves nothing; the new price is announced. One card holds the plan's name, price, trial button and trial line on the left and everything included, in two columns with checks, on the right. A link to the billing questions sits under it. Below 1024px the card stacks, and the list drops to one column once its own width runs short.

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

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, button, card, text-link, 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 5, with install commands: https://ui.edbn.me/docs/blocks/pricing (Markdown: 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