PricingTable

A SaaS composite that renders pricing tiers as a responsive Card grid. Supports popular tier highlighting, feature check/x lists with tooltips, billing period toggle via SegmentedControl, and an optional feature comparison table.

SaaSpricingplansbillingsubscriptionsaastiers

Three tiers

import { PricingTable } from '@primstack/ui/pricing-table'

<PricingTable tiers={[
  { name: 'Starter', price: 0, period: 'mo', features: [{text: '1 user', included: true}], cta: 'Get Started' },
  { name: 'Pro', price: 29, period: 'mo', popular: true, features: [{text: '10 users', included: true}], cta: 'Upgrade' },
  { name: 'Enterprise', price: 'Custom', features: [{text: 'Unlimited', included: true}], cta: 'Contact Sales' },
]} />

With billing toggle

import { PricingTable } from '@primstack/ui/pricing-table'

<PricingTable
  tiers={tiers}
  billingToggle
  onTierSelect={(tier) => selectPlan(tier)}
/>

Related Components