Pricing Table - Flexprice

Use Pricing Table to show a comparison table of multiple plans, with billing period and currency controls built in.

Preview
Code

const plans: Plan[] = /* fetch + map */;

<PricingTable
  plans={plans}
  billingPeriod={period}
  onBillingPeriodChange={setPeriod}
  billingPeriodOptions={[{ label: 'Monthly', value: 'MONTHLY' }]}
  currency={currency}
  onCurrencyChange={setCurrency}
  currencyOptions={[{ label: 'USD', value: 'USD' }]}
  onSelectPlan={(planId) => router.push(`/checkout/${planId}`)}
/>

What PricingTable supports

Unlimited plans
Feature comparison
Usage limits and included entitlements
Custom pricing units
Custom CTA
Recommended plan highlighting
Billing period and currency controls

Where to use PricingTable

Pricing pages
Documentation
Sales pages

Importing PricingTable

import '@flexprice/ui/style.css';
import { PricingTable, type Plan } from '@flexprice/ui';

Rendering PricingTable

const plans: Plan[] = /* fetch + map */;

<PricingTable
  plans={plans}
  billingPeriod={period}
  onBillingPeriodChange={setPeriod}
  billingPeriodOptions={[{ label: 'Monthly', value: 'MONTHLY' }]}
  currency={currency}
  onCurrencyChange={setCurrency}
  currencyOptions={[{ label: 'USD', value: 'USD' }]}
  onSelectPlan={(planId) => router.push(`/checkout/${planId}`)}
/>

Wire onSelectPlan to Checkout or your own flow. See Ways to provide data for SDK, API, backend, and static JSON options.

Mapping API data into PricingTable

import { adaptPlanToCard, filterAndSortPlans } from '@flexprice/ui';

const plans = filterAndSortPlans(plansWithData, 'USD', 'MONTHLY').map((p) =>
  adaptPlanToCard(p, grants)
);

Overview

Install Flexprice UI, choose a data source, theme, and integrate components.

Pricing Card

Single plan card for dashboards, modals, and custom layouts.