Installation
Usage
import { PricingSection } from "@/components/pricing-section"
export default function Page() {
return <PricingSection currency="USD" />
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| plans | PricingPlan[] | three plans | name, description, monthly, yearly, featuresTitle?, features, cta, highlighted?, badge?. |
| comparison | PricingComparisonRow[] | 8 rows | Feature table under the cards ({ group?, feature, values }); [] hides it. |
| faqs | { question; answer }[] | three | Native <details> FAQ. |
| currency / locale | string | "USD" / "en-US" | Price formatting. |
| defaultPeriod | "monthly" | "yearly" | "yearly" | Billing period shown first. |
| eyebrow / title / subtitle | string | — | Section heading and intro. |
Accessibility
- The billing switch is a labelled radio group ("Billing period"); the cards stay put and only prices change, so focus is never lost.
- Each plan is an article named by its heading; features say Included / Not included.
- The comparison is a real table with row, column and group headers, behind a button with aria-expanded; ticks and dashes read as Included / Not included.
- The FAQ uses native <details>, which works with no script and with find-in-page.
Changelog
- v1.0.0Latest
First release.