---
title: Pricing Table
description: A row of pricing plans — formatted amounts, feature lists, and a featured highlight
visibility: guest
draft: false
---
# Pricing Table
The plan grid every product page needs. [Price](/components/price) formats a
single amount; this is the block people choose from.
## Basic Usage
:::preview{title="Three plans"}
1 project
Community support
Start free
Unlimited projects
Priority support
Audit log
Choose Pro
Everything in Pro
SSO and SCIM
A named contact
Contact sales
:::
## Amounts are formatted, not typed
Pass the **raw** amount and a currency. The tier renders it through
[Price](/components/price), so every plan is formatted for the visitor's locale
and no one hard-codes `"€29"` into copy.
```blade
{{-- 1. Raw number in — locale-formatted currency out --}}
```
A tier with no number — "Let us talk" — uses `priceLabel` instead. It never
invents an amount.
## The featured plan
`featured` marks the plan you want chosen. It gets **a badge and a ring** — not
a tint. A highlight that exists only as a color is invisible to a screen reader
and to anyone who cannot separate your accent from your border.
It is deliberately **not scaled up**: enlarging one card reflows the row and
makes the neighbors look broken on a phone.
## Billing interval toggle
Give the table an `intervals` map and it renders the toggle itself. Each tier
then carries interval-keyed `prices`, and switching costs no server round trip:
:::preview{title="Monthly / annual toggle"}
:::
Every amount is **formatted on the server** by the [price](/components/price)
component — the toggle only switches which one is visible, so your currency,
locale and minor-unit rules are never reimplemented in JavaScript. Before
JavaScript runs, the first interval is the one on screen.
```blade
```
A tier with a single flat `price` still works inside an interval table — a free
plan does not need two amounts.
### Driving the interval from your own state
When the choice has to reach the server — because it changes what you query, or
you persist it — bind the table itself:
```blade
{{-- 1. The table owns the toggle and reports the choice like a form control. --}}
@foreach($plans as $plan)
@endforeach
```
It works inside a plain `
```
**Before the table had `interval`**, the way to do this was to keep the amounts on
one property and switch them yourself with a separate
[Segmented Control](/components/segmented-control). That still works and is worth
knowing if your toggle drives more than the prices:
```blade
{{-- 1. One property decides which set of amounts renders --}}
@foreach($plans as $plan)
{{-- 2. The tier just renders the amount it is handed --}}
@endforeach
```
## Fitting the grid to your plans
`columns` sets how many plans sit side by side at the widest breakpoint —
otherwise a two-plan table renders the three-column ladder and leaves a gap where
the third plan would have been. One plan per row on a phone in every case.
```blade
…
```
## SEO
Emit `Offer` structured data alongside the table with
[Structured Data](/components/structured-data) — but only for the plans the page
actually shows.
## Props
### pricing-table
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | string | `'Pricing plans'` | Accessible name for the list of plans |
| `intervals` | array\|null | `null` | Billing intervals as `key => label`. Given, the table renders its own toggle and the tiers switch their `prices`. |
| `intervalLabel` | string | `'Billing interval'` | Accessible name for the interval toggle |
| `columns` | int | `3` | Plans side by side at the widest breakpoint (`1`, `2`, `3`, `4`). One per row on a phone regardless. |
| `name` | `string` | `'interval'` | Name of the hidden input the chosen interval is written to, so a surrounding `