Three pricing tiers with a sliding monthly/yearly toggle, crossfading prices, feature checklists and a highlighted most-popular plan.
Start free and upgrade when you grow. No hidden fees, no surprises.
For side projects and early experiments.
For growing teams that ship every week.
For organizations that need control and scale.
npx shadcn@latest add https://hyperblur.dev/r/pricing-section.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pricing-section.tsx.
import { PricingSection } from "@/components/hyperblur/pricing-section"
<PricingSection currency="€" tiers={[{ name: "Pro", price: { monthly: 20, yearly: 16 }, features: ["Everything"], cta: { label: "Buy", href: "/buy" }, highlighted: true }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Simple pricing that scales with you" | Section heading. |
| subtitle | string | sample text | Paragraph under the heading. |
| tiers | PricingTier[] | Starter, Pro (highlighted), Team | Each tier: { name, price: { monthly, yearly }, description?, features: string[], cta: { label, href }, highlighted? }. Prices can be numbers or strings such as Custom. Yearly values are the per-month price when billed yearly. |
| accent | string | "#2f7bff" | Accent color for the toggle, highlighted card, badge and checks. |
| currency | string | "$" | Symbol prepended to numeric prices. |
| yearlyDiscountLabel | string | "Save 20%" | Badge on the yearly option. Empty string hides it. |
| popularLabel | string | "Most popular" | Text of the badge on the highlighted tier. |
| defaultPeriod | "monthly" | "yearly" | "monthly" | Billing period selected on first render. |