Pricing
@allem-ui/pricing
Pricing tables, cards, toggles, and feature comparison components for SaaS and product pages.
Installation
npm install @allem-ui/pricingComponents
PricingCard
Individual pricing plan card with name, price, features, and CTA button.
Most Popular
Pro
For growing teams
$29/mo
- Unlimited projects
- Priority support
- Custom domains
- SSO
PricingToggle
Monthly/yearly billing period toggle with optional savings badge.
Save 20%
PricingCard Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name* | string | — | Plan name |
| price* | string | number | — | Plan price |
| period | string | "/mo" | Billing period label |
| description | string | — | Plan description |
| features | { text: string; included: boolean }[] | — | Feature list |
| cta | string | — | CTA button text |
| onCtaClick | () => void | — | CTA click handler |
| isPopular | boolean | false | Highlight as popular plan |
PricingTable Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | — | PricingCard elements |
| className | string | — | Additional CSS classes |
PricingToggle Props
| Prop | Type | Default | Description |
|---|---|---|---|
| isYearly* | boolean | — | Whether yearly is selected |
| onChange* | (isYearly: boolean) => void | — | Toggle callback |
| savingsLabel | string | — | Savings badge text |
| className | string | — | Additional CSS classes |
FeatureList Props
| Prop | Type | Default | Description |
|---|---|---|---|
| features* | FeatureListItem[] | — | Array of features with name and included boolean |
| className | string | — | Additional CSS classes |
PricingComparisonTable Props
| Prop | Type | Default | Description |
|---|---|---|---|
| plans* | ComparisonPlan[] | — | Array of plan definitions |
| features* | ComparisonFeatureCategory[] | — | Feature categories with plan values |
| className | string | — | Additional CSS classes |