Pricing Plans
Compare three pricing plans with a market switch and a highlighted plan.
- Dependencies
- gsap
- Size
- 336 lines
- Controls
- 9 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/pricing-plans.json1 · Dependencies
npm install gsap2 · Copy the source
components/onycx/pricing-plans.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the pricing-plans.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| plans | PricingPlan[] | — | { name, prices: { [marketId]: string }, description, features, timeline, kicker?, priceLabel?, cta?, featured? }. Prices are preformatted strings, e.g. "$2,500", "₹85,000" or "Let’s talk". |
| markets / defaultMarket | PricingMarket[] / string | [International / USD, India / INR] / "international" | { id, label } segments of the aria-pressed switch; one market hides the switch. |
| eyebrow / heading / headingAccent / intro | string | — | Header copy; the second heading line is muted #8e8e8e. |
| ctaHref / ctaLabel | string | "/contact" / "Let’s discuss" | Every CTA links to ctaHref with ?package=<plan name>&market=<id> appended. |
| note / noteLinkLabel / noteLinkHref | string | — | Centred small print and its underlined link. |
| backdropWord | string | "PRICING" | Giant decorative word behind the section; empty string removes it. |
| accent / background | string | "#e85002" / "#070707" | Featured-card dot and the section surface. |