> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nozle.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# PlanComparison
> A table of your plans side by side, one row per entitlement and credit grant.
`PlanComparison` renders your plans as columns and what they include as rows, so customers see the real difference between plans.
**When to use**
* Below the plan cards of a [`PricingTable`](/sdks/react/components/pricing-table) on a pricing page.
* A "compare plans" page or dialog.
**Light**
**Dark**
**Minimal**
**Neobrutal**
**Nozle**
**Nozle Dark**
## Importing PlanComparison
```tsx theme={null}
import {
PlanComparison,
comparisonRows,
type ComparisonFeature,
type PricingPlan,
} from '@nozle-js/react'
```
## Rendering PlanComparison
Pass the plans; the table builds one column per plan and one row per entitlement and per granted credit system:
```tsx components/compare-plans.tsx theme={null}
export function ComparePlans({ plans }: { plans: PricingPlan[] }) {
return
}
```
Each column shows the plan's name and price, cheapest first. A cell shows a check for an included feature, the limit or value where there is one, and a cross where a plan does not have it. A wide table scrolls sideways inside its frame.
## Data
The table needs plans in the `PricingPlan` shape the public catalog returns. The rows come from their `entitlements` and `credit_grant_rules`:
```tsx theme={null}
const plans: PricingPlan[] = [
{
code: 'free',
name: 'Free',
amount_cents: 0,
amount_currency: 'USD',
interval: 'monthly',
entitlements: [{ feature_type: 'metered', code: 'api_calls', name: 'API calls', usage_limit: 1000 }],
},
{
code: 'pro',
name: 'Pro',
amount_cents: 2900,
amount_currency: 'USD',
interval: 'monthly',
entitlements: [{ feature_type: 'metered', code: 'api_calls', name: 'API calls', usage_limit: 50000 }],
credit_grant_rules: [{ credit_system_code: 'ai_credits', amount: '500', interval: 'month' }],
},
]
export function ComparePlans() {
return
}
```
> **Full example data**
>
> ```tsx theme={null}
> const plans: PricingPlan[] = [
> {
> code: 'free',
> name: 'Free',
> amount_cents: 0,
> amount_currency: 'USD',
> interval: 'monthly',
> entitlements: [
> { feature_type: 'metered', code: 'api_calls', name: 'API calls', usage_limit: 1000 },
> { feature_type: 'metered', code: 'seats', name: 'Seats', usage_limit: 1 },
> ],
> },
> {
> code: 'pro',
> name: 'Pro',
> amount_cents: 2900,
> amount_currency: 'USD',
> interval: 'monthly',
> entitlements: [
> { feature_type: 'metered', code: 'api_calls', name: 'API calls', usage_limit: 50000 },
> { feature_type: 'metered', code: 'seats', name: 'Seats', usage_limit: 10 },
> ],
> credit_grant_rules: [{ credit_system_code: 'ai_credits', amount: '500', interval: 'month' }],
> },
> ]
>
> export function ComparePlans() {
> return
> }
> ```
### Live data
Pass the plans of [`usePlans`](/sdks/react/hooks#useplans). `comparisonRows(plans)` returns the generated rows, so you can add or remove rows before passing them as `features`:
```tsx theme={null}
import { usePlans } from '@nozle-js/react'
export function LiveComparison() {
const { plans, isLoading } = usePlans()
if (isLoading) return null
const rows = comparisonRows(plans).filter((row) => row.key !== 'entitlement:internal_flag')
return
}
```
### Data from the API
Generated row keys are `entitlement:` and `credit:`. A cell shows:
| Plan has | Cell |
| - | - |
| A metered entitlement with a `usage_limit` | The limit, for example `50,000` |
| A boolean entitlement, or a metered one without a limit | A check |
| A `config` entitlement | Its privilege values, comma-separated |
| A credit grant rule | `500 ai credits every month` |
| Nothing for that row | A cross |
## Examples
### Your own rows
Pass `features` to write the rows yourself. `values` is keyed by plan code; `true` shows a check, `false` a cross, and a string is shown as written.
```tsx theme={null}
const plans: PricingPlan[] = [
{ code: 'free', name: 'Free', amount_cents: 0, amount_currency: 'USD', interval: 'monthly' },
{ code: 'pro', name: 'Pro', amount_cents: 2900, amount_currency: 'USD', interval: 'monthly' },
]
const rows: ComparisonFeature[] = [
{ key: 'projects', label: 'Projects', values: { free: '3', pro: 'Unlimited' } },
{ key: 'sso', label: 'Single sign-on', values: { free: false, pro: true } },
]
export function ComparePlans() {
return
}
```
### Your own column order
`sort` orders the columns, for example most expensive first.
```tsx theme={null}
export function ComparePlans({ plans }: { plans: PricingPlan[] }) {
return b.amount_cents - a.amount_cents} />
}
```
## API reference
**plans** `PricingPlan[]` *required*
The plans to compare. The rows are built from their `entitlements` and `credit_grant_rules`.
**features** `ComparisonFeature[]`
Replaces the rows. Each row is `{ key, label, values }`; `values` maps a plan code to `true`, `false` or a string. A plan missing from `values` shows `—`. Defaults to `comparisonRows(plans)`.
**sort** `(a: PricingPlan, b: PricingPlan) =\> number`
Orders the columns. Defaults to cheapest first with `sortPlansByPrice`: by base price, with plans in different currencies grouped.
**appearance** `Appearance`
Theme, variables and element overrides. Defaults to the provider's. See [Appearance](/sdks/react/styling).
### States
| State | What shows |
| - | - |
| Plan includes the row | A check, or the limit or value. |
| Plan does not include the row | A cross. |
| Plan missing from a custom row's `values` | `—`. |
The table shows [Powered by Nozle](/sdks/react/components/powered-by-nozle) below it.
### Appearance
> **Element keys**
>
> `planComparison` (root), `planComparison__table`, `planComparison__row`, `planComparison__cell` (header and body cells).
>
> Style them with `appearance.elements`. See [Elements](/sdks/react/styling#elements).
## Related
> **[PricingTable](/sdks/react/components/pricing-table)**
>
> Plan cards with checkout.
> **[PlanCard](/sdks/react/components/plan-card)**
>
> One plan card for your own layout.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.