PlanComparison

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 on a pricing page.
A “compare plans” page or dialog.

PlanComparison of Free, Pro and Scale with rows for API calls, seats and AI credits, light theme

Importing PlanComparison

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:

components/compare-plans.tsx

export function ComparePlans({ plans }: { plans: PricingPlan[] }) {
  return <PlanComparison plans={plans} />
}

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:

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 <PlanComparison plans={plans} />
}

Full example data

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 <PlanComparison plans={plans} />
}

Live data

Pass the plans of usePlans. comparisonRows(plans) returns the generated rows, so you can add or remove rows before passing them as features:

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 <PlanComparison plans={plans} features={rows} />
}

Data from the API

Generated row keys are entitlement:<feature code> and credit:<credit system code>. 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.

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 <PlanComparison plans={plans} features={rows} />
}

Your own column order

sort orders the columns, for example most expensive first.

export function ComparePlans({ plans }: { plans: PricingPlan[] }) {
  return <PlanComparison plans={plans} sort={(a, b) => b.amount_cents - a.amount_cents} />
}

API reference

PricingPlan[]

required

The plans to compare. The rows are built from their entitlements and credit_grant_rules.

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).

(a: PricingPlan, b: PricingPlan) => number

Orders the columns. Defaults to cheapest first with sortPlansByPrice: by base price, with plans in different currencies grouped.

Appearance

Theme, variables and element overrides. Defaults to the provider’s. See Appearance.

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 below it.

Appearance

Element keys

planComparison (root), planComparison__table, planComparison__row, planComparison__cell (header and body cells).Style them with appearance.elements. See Elements.

PricingTable

Plan cards with checkout.

PlanCard

One plan card for your own layout.

Setup

Components

Billing

Entitlements

PlanComparison

Importing PlanComparison

Rendering PlanComparison

Data

Live data

Data from the API

Examples

Your own rows

Your own column order

API reference

States

Appearance

PricingTable

PlanCard

​Importing PlanComparison

​Rendering PlanComparison

​Data

​Live data

​Data from the API

​Examples

​Your own rows

​Your own column order

​API reference

​States

​Appearance

​Related

PricingTable

PlanCard

Importing PlanComparison

Rendering PlanComparison

Data

Live data

Data from the API

Examples

Your own rows

Your own column order

API reference

States

Appearance

Related