Special/PricingTable
PricingTable
Animated pricing comparison table with monthly/annual billing toggle, feature rows with check/dash indicators, a highlighted "popular" plan, and animated price transitions.
import { PricingTable } from "@animui/ui"Full example
MonthlyAnnualSave 20%
Starter
For personal projects
$
0
/mo- 3 projects
- 1 member
- Priority support
- SSO / SAML
- Audit logs
Most popular
Pro
For teams and startups
$
29
/mo- Unlimited
- Up to 20
- Priority support
- SSO / SAML
- Audit logs
Enterprise
For large organizations
$
99
/mo- Unlimited
- Unlimited
- Priority support
- SSO / SAML
- Audit logs
Feature rows
Pass a features array. Each feature has a label and a plans map where keys are plan IDs and values are true (check), false (dash), or a custom string override.
PricingPlan props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | — | Unique plan identifier — matches feature plan keys. |
name | string | — | Plan display name. |
description | string | — | Short description beneath the name. |
monthlyPrice | number | — | Monthly price as a number. |
annualPrice | number | — | Annual price (per month) shown when billed annually. |
highlight | boolean | false | Applies the highlighted/popular style to this plan. |
badge | string | — | Badge text above the card (e.g. "Most popular"). |
ctaLabel | string | "Get {name}" | CTA button label. |
onCta | () => void | — | CTA button click handler. |
PricingTable props
| Prop | Type | Default | Description |
|---|---|---|---|
plans | PricingPlan[] | — | Array of pricing plans to display. |
features | PricingFeature[] | [] | Feature comparison rows. |
defaultBilling | "monthly" | "annual" | "monthly" | Initial billing period state. |
currency | string | "$" | Currency symbol shown before the price. |
className | string | — | Applied to the outer container. |