# Pricing

> Plan tiers side by side, with an optional monthly / annual switch.

URL: https://apogee.avaui.dev/docs/sections/pricing
Last updated: 2026-10-15

Plan tiers side by side, with an optional monthly / annual switch.

Last updated October 15, 2026

Uses JavaScript

With `layout="tiers-toggle"` a small island listens to the billing switch and swaps the visible price in each tier; it dispatches `apogee:pricing-change` (`detail: { period }`).

**Without JS:** The switch is hidden and the monthly prices show.

```astro
<Pricing heading="Simple pricing" layout="tiers-toggle" items={[{ name, price, annualPrice, period, description, features, action, featured? }, …]} />
```

## Add

```sh
npx @ava-ui/apogee add pricing
```

## API

| Prop | Type | Default | Category | Description |
| --- | --- | --- | --- | --- |
| `eyebrow`, `heading`, `description` | `string` | — | content | Optional header. |
| `items` | `{ name, price, annualPrice?, period?, annualPeriod?, description, features: string[], action: { label, href }, featured?, badge? }[]` | — | content | Required. `annualPeriod` replaces `period` while Annual is picked (“year” next to a yearly price). `featured` gets the primary border, button and a “Popular” badge (`badge` overrides the text). |
| `periods` | `{ monthly, annual }` | `Monthly` / `Annual` | content | Labels on the switch. |
| `label` | `string` | English | content | Landmark name when there is no heading. |
| `periodLabel` | `string` | `'Billing period'` | content | Name of the billing switch. |
| `layout` | `'tiers' \| 'tiers-toggle'` | `'tiers'` | layout |  |
| `align` | `'start' \| 'center'` | `'center'` | layout |  |
| `background`, `spacing`, `headingLevel`, `id` |  |  | layout | As on every section. |

## Layouts

```astro
<Pricing layout="tiers" items={…} />
<Pricing background="inverted" items={…} />
```

## Accessibility

-   The switch is a native radio group labelled “Billing period”; prices use tabular figures; each plan’s name is a heading one level below the section heading.