Toggle Pricing Cards
A free animated pricing section for React and Next.js: a monthly and annual billing switch with rolling price digits.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- Motion
- 1 runtime package
Toggle Pricing Cards is a free pricing section for Next.js and React, built with Motion and styled with Tailwind. A real switch flips billing between monthly and annual: a spring-loaded thumb slides between the two labels, and every card's price rolls to the new value, the old digits sliding up and out while the new ones rise in. Each price slot reserves the width of its widest value with tabular numerals, so the cards never shift during the roll.
Cards enter once on first view with a staggered rise, then the highlighted plan lifts to 102 percent scale with an emphasis ring and inverted colours. The server HTML renders the monthly prices, the switch carries the accessible name Billing period, prices include visually hidden billed monthly or billed annually text, and a polite live region announces the settled billing state and prices once per toggle. With reduced motion enabled prices swap instantly, there is no entrance or lift, and the thumb places without a spring.
Pricing plans
Starter
For side projects and first launches.
$12 per month, billed monthly
- 3 projects
- Community support
- Basic analytics
- Custom domain
Growth
For teams shipping every week.
$24 per month, billed monthly
- Unlimited projects
- Priority support
- Advanced analytics
- Team roles and permissions
Scale
For products with serious traffic.
$48 per month, billed monthly
- Everything in Growth
- Dedicated support
- Audit logs and SSO
- Uptime SLA
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/pricing-toggle-cardsUsage
import { PricingToggleCards } from "@/components/pricing-toggle-cards";
export default function Page() {
return (
<PricingToggleCards
plans={[
{
name: "Starter",
monthly: 12,
annual: 10,
blurb: "For side projects.",
features: ["3 projects", "Community support"],
cta: { label: "Start with Starter", href: "/signup" },
},
{
name: "Growth",
monthly: 24,
annual: 20,
blurb: "For growing teams.",
features: ["Unlimited projects", "Priority support"],
cta: { label: "Choose Growth", href: "/signup" },
highlighted: true,
},
]}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| plans | PricingPlan[] | required | The 2 to 4 plans to render, in display order. Each plan carries name, monthly and annual per-month prices, blurb, features, cta and an optional highlighted flag. |
| currency | string | "$" | Prefix symbol rendered before every price. |
| annualNote | string | "2 months free" | Badge text next to the annual option on the billing switch. |
| className | string | undefined | Additional classes merged onto the section. |
Customisation
Toggle Pricing Cards declares no tokens of its own. Cards, switch and CTAs paint with the global background, foreground, muted, border and ring semantic tokens, and the highlighted plan simply inverts background and foreground, so retheming those tokens rethemes the whole section. Adjust width and spacing from the className prop:
<PricingToggleCards
plans={plans}
currency="£"
annualNote="Save 17%"
className="mx-auto max-w-4xl"
/>
/* retheme the section via the semantic tokens */
:root {
--background: oklch(0.16 0.02 280);
--foreground: oklch(0.97 0.01 280);
--ring: oklch(0.72 0.15 280);
}Frequently asked questions
- Is Toggle Pricing Cards free for commercial use?
- Yes. Toggle Pricing Cards is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is the billing toggle accessible?
- Yes. The billing control is a real switch role with the accessible name Billing period, it is keyboard operable with Space and Enter from a single tab stop, and it shows a visible focus ring. Prices carry visually hidden per month, billed monthly or billed annually text, and a polite live region announces the settled billing state and prices exactly once per toggle. Only transform and opacity animate and every price slot reserves the width of its widest value, so nothing shifts layout, and with reduced motion enabled prices swap instantly with no entrance, roll or lift.
- How do the monthly and annual prices work?
- Each plan takes two numbers: monthly is the per-month price on monthly billing and annual is the discounted per-month price when billed annually. The section always displays a per-month figure and swaps between the two as the switch flips, with the server HTML rendering the monthly price. Currency conversion and locale formatting are out of scope; the currency prop is a plain prefix symbol.