Plans

Read-only, and public - no user session required beyond x-app-id. Same data as the server SDK’s plans(), for rendering a pricing/upgrade page directly from the client.

import { usePlans } from '@kerne/react';

function PricingPage() {
  const { plans, isLoading } = usePlans();

  if (isLoading) return <Spinner />;

  return plans.map((plan) => (
    <PlanCard key={plan.id} plan={plan} onSelect={() => openCheckout(plan.prices[0].id)} />
  ));
}

Pass a product ID or slug for a tenant with more than one product - omit it to resolve the tenant’s default product:

const { plans } = usePlans('enterprise-suite');

Each plan: { id, slug, name, is_default, trial_days, prices: [...], entitlements: [...] }, and each price carries a label ({ slug, name, sort_order, display_interval }) grouping it with the equivalent price on every other plan. See checkout & portal for turning a selected price into a checkout session. For a full pricing page, <PricingTable> already does the label grouping, the interval toggle, and the checkout wiring for you - reach for this hook directly only when you want to build the layout yourself.

Server SDK

Frontend SDKs