Pricing Table

Flexible pricing card and feature comparison components. Supports monthly/yearly billing toggles, popular badge highlighting, and detailed feature lists.

Pricing cards

MonthlyYearly-20%

Starter

For individuals and small projects

0/month

5 conversations/month
Basic AI models
Email support
API access

Pro

For teams and power users

29/month

Unlimited conversations
All AI models
Priority support
API access

Enterprise

For organizations with custom needs

99/month

Everything in Pro
Custom model fine-tuning
Dedicated support
SSO & audit logs

Fixed billing

Remove the toggle and show a single price per plan.

Starter

For individuals and small projects

0/month

5 conversations/month
Basic AI models
Email support
API access

Pro

For teams and power users

29/month

Unlimited conversations
All AI models
Priority support
API access

Enterprise

For organizations with custom needs

99/month

Everything in Pro
Custom model fine-tuning
Dedicated support
SSO & audit logs

Feature comparison

Tabular view for side-by-side feature matrix.

Feature	Starter	Pro	Enterprise
AI Assistant
Code completion
Custom models
Support SLA	48h	24h	1h

PricingTable props

Prop	Type	Default	Description
`tiers`	`PricingTier[]`	—	Array of tier objects.
`showBillingToggle`	`boolean`	`false`	Monthly/yearly toggle.
`defaultBilling`	`"monthly" \| "yearly"`	`"monthly"`	Initial billing period.
`onBillingChange`	`(period: string) => void`	—	Toggle callback.

PricingTier shape

interface PricingTier {
  id: string;
  name: string;
  description?: string;
  price: {
    monthly?: number | string;
    yearly?: number | string;
  };
  features: Array<{
    name: string;
    included: boolean;
    note?: string;
  }>;
  cta?: { label: string; variant?: "primary" | "secondary" | "ghost" };
  popular?: boolean;
}

Best practices

→Highlight one plan as 'Most Popular' using the popular flag (accent border and glow).
→Show savings on yearly plan — '2 months free' language or percentage badge.
→Order plans low→high; three tiers is optimal.
→Features list should be scannable; use checkmarks for included, X for excluded.
→Free tier should always exist to lower barrier to entry.