Pricing Plans
Pricing section with a monthly / yearly switch, three plan cards and collapsible details.
Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/pricing-plans.json · Import from @/components/ui/pricing-plans
When to use
- A pricing page or section with up to three plans and a monthly / yearly choice
- Plans that differ in a few limits plus a longer list of features
When not to use
- One-time purchases – drop the billing switch or use a simpler card
- More than three or four plans – use a comparison table instead
Usage
import { PricingPlans } from "@/components/ui/pricing-plans";
export function Pricing() {
return <PricingPlans plans={plans} defaultBilling="yearly" />;
}Props
| Name | Type | Default | Description |
|---|---|---|---|
plans | Plan[] | Name, monthly and yearly price, limits, sync chip, features and an onSelect callback | |
title | string | "Choose your plan" | Section heading |
subtitle | string | Line under the heading | |
defaultBilling | "monthly" | "yearly" | "yearly" | Billing period shown first |
currency | string | "$" | Symbol in front of the prices |
className | string | Extra class on the section |
Keyboard
- Tab: Move between the switch, the buttons and the detail toggles
- Enter / Space: Switch the billing period, start a plan or show / hide details
Accessibility
- The billing switch is a radio group
- Details toggles use aria-expanded; hidden details are inert
- Features that are not included are announced as such
Responsive
- Three columns on wide screens, one column below 860px
- Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"
Requirements
- React 19