Pricing Plans
Choose one of a few fixed plans, then confirm. For a plan built from quantities and add-ons, use plan-builder.
Overview
- `PricingPlans`: lays out the options and an optional
summary(anOrderSummarywith the chosen plan and a "Continue" action: a sticky card on large screens, a bar fixed to the bottom on smaller ones). - `PricingPeriod`: the billing period as a segmented toggle that always has one selected (
value/onChange;PricingPeriodOptionwith anid, and aBadgeinside for the saving). - `PricingPlanGroup`: a radio group of
PricingPlancards, stacked in one list on small screens and side by side in equal columns once its own width fits them. - `PricingPlan`:
name,badge("Most popular"),description,priceandperiodformatted by the app,priceNote(the equivalent, "R$ 718,80 per year") andisFeaturedfor a brand glow and abrandbadge (the border is left to the selected plan). The radio is named by the plan and described by its price. - `PricingPlanFeature`: what the plan has;
isIncluded={false}shows a dash, muted text and "Not included" read before it.
Built-in text is in English; translate it with i18n.labels.
Installation
CLI
Manual
- 1
Register the @fma-ds namespace in components.json (once)
- 2
Add the item
Files land in
components/fma-ds/pricing-plans/pricing-plans.tsx; npm and registry dependencies are installed along with them.
Dependencies
- npm
- cn@^0.5.0lucide-react@^1.61.0react-aria-components@^1.22.1
- Registry
- @fma-ds/badge@fma-ds/radio-group@fma-ds/toggle-group@fma-ds/brand