Price Table

PricingTable (shown as Price Table in the component menu) presents multiple plans side by side. PriceTable is also available as an alias. It provides the visual structure and selection callbacks; billing logic, checkout, subscription state, and persistence stay in the application using the component.

Basic usageCopy Anchor Link

import { PricingTable } from '@mosmox/ui';

<PricingTable
  plans={[
    {
      key: 'starter',
      name: 'Starter',
      price: 0,
      billing: '/month',
      description: 'For trying the essentials.',
      features: [
        { label: '1 workspace', included: true },
        { label: 'Advanced analytics', included: false },
      ],
      actionLabel: 'Get started',
    },
  ]}
  currency="USD"
  onSelect={(plan) => startCheckout(plan.key)}
/>

price may be a number or any React content. Numeric prices are formatted with currency using the browser locale. Use a string or custom node for prices such as Contact us or Custom.

The table renders plans in the order supplied. columns is clamped to the range 1–6; when it is omitted, the component uses the provider default or the plan count capped at four. fullWidth={false} removes the full-width modifier so the surrounding layout controls the table width.

Plans, features, and actionsCopy Anchor Link

Each plan has a stable key, a name, price, optional billing text, description, features, badge, icon, accent color, and action. A plan can be marked popular to give it stronger visual emphasis.

<PricingTable
  plans={plans}
  renderFeature={(feature) => feature.tooltip ? <span>{feature.label} ⓘ</span> : feature.label}
  renderPlanAction={(plan) => <Button onClick={() => choose(plan.key)}>{plan.actionLabel}</Button>}
  showFeatureStates
/>

included: false displays a muted feature with a dash when showFeatureStates is enabled. highlight emphasizes an individual feature. value can replace the feature label with a plan-specific value such as 10 GB or Unlimited.

Variants and responsive layoutCopy Anchor Link

Five variants are available: cards, bordered, flat, spotlight, and compact. size accepts sm, default, or lg. columns controls the intended desktop column count, from 1 to 6; the layout automatically reduces to two columns and then one column on narrow screens.

<PricingTable plans={plans} variant="spotlight" columns={3} size="lg" />
<PricingTable plans={plans} variant="bordered" columns={4} />
<PricingTable plans={plans} variant="flat" size="sm" fullWidth={false} />

The spotlight variant lifts and emphasizes the plan with popular: true. fullWidth controls whether the table uses the available width. Use style or className for application-specific layout rules.

Selection and controlled stateCopy Anchor Link

Use defaultSelectedKey for an initially emphasized plan. Use selectedKey when the parent owns the selection state. The component calls onSelect when a built-in plan action is activated.

<PricingTable
  plans={plans}
  selectedKey={selectedPlan}
  defaultSelectedKey="pro"
  onSelect={(plan) => setSelectedPlan(plan.key)}
/>

When renderPlanAction is provided, it replaces both the built-in button and plan.action. Otherwise plan.action is rendered as supplied; if neither is present, the component creates a native button using actionLabel. Disabled plans still render for comparison but their built-in action is disabled. selectedKey takes precedence over defaultSelectedKey and applies the selected visual state to the matching plan.

ConfigProviderCopy Anchor Link

Set defaults for a group of pricing tables with ConfigProvider. Instance props take precedence.

<ConfigProvider
  components={{
    pricingTable: {
      columns: 3,
      size: 'default',
      variant: 'cards',
    },
  }}
>
  <PricingTable plans={plans} currency="USD" />
</ConfigProvider>

API ReferenceCopy Anchor Link

style can also provide the --mm-pricing-columns CSS custom property for application-specific layout control, although the columns prop is the normal API.

PricingPlanCopy Anchor Link

PricingFeatureCopy Anchor Link

AccessibilityCopy Anchor Link

Each plan is exposed as an article with an accessible name when its name is text. Built-in actions are native buttons, feature states are represented by text and visual marks, and responsive layout preserves the reading order of plans on small screens. Use meaningful labels and descriptions for custom content.