# Pricing Table

Plan picker for paywalls and upgrades, as selectable rows, a feature comparison or swipeable cards. The chosen plan fills with colour, and prices roll smoothly when you switch billing period.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/pricing-table
```

## Import

```tsx
import { PricingTable } from "@/components/ui/pricing-table/pricing-table";
```

## Variants

- `cards` — Plan cards: `npx @lumioui/cli add pro/pricing-table-cards`
- `comparison` — Plan comparison: `npx @lumioui/cli add pro/pricing-table-comparison`
- `paywall` — Trial paywall: `npx @lumioui/cli add pro/pricing-table-paywall`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `plans` | `PricingPlan[]` | Plans, in display order. |
| `features?` | `PricingFeature[]` | Feature matrix for layout="comparison". |
| `layout?` | `"list" | "comparison" | "cards"` | Presentation. Default "list". |
| `value?` | `string` | Controlled selected plan id. |
| `defaultValue?` | `string` | Uncontrolled initial plan id. Default: first plan with a badge, else the first plan. |
| `onValueChange?` | `(id: string) => void` | Fires with the newly selected plan id. |
| `billing?` | `Billing` | Controlled billing period. |
| `defaultBilling?` | `Billing` | Uncontrolled initial billing period. Default "yearly". |
| `onBillingChange?` | `(billing: Billing) => void` | Fires when the billing switch changes. |
| `showBillingToggle?` | `boolean` | Show the monthly / yearly switch. Default: true when any plan has a yearlyPrice. |
| `yearlySavingsLabel?` | `string` | Suffix on the yearly segment — "Save 20%". |
| `currency?` | `string` | Currency symbol for the default formatter. Default "$". |
| `formatPrice?` | `(amount: number, plan: PricingPlan, billing: Billing) => string` | Custom price formatter (receives the per-month amount for the active billing). |
| `confirmed?` | `boolean` | The choice is committed — one sheen crosses the chosen plan, the others step back and lock. |
| `className?` | `string` | — |

## Icons rendered

- `check` — /icons.html?i=check
- `minus` — /icons.html?i=minus

Source: https://lumioui.com/components/pricing-table