Toggle Pricing Cards
A free animated pricing section for React and Next.js: a monthly and annual billing switch with rolling price digits.
Pricing plans
2 months free
Starter
For side projects and the first paying customers.
$12 per month, billed monthly
- 3 projects
- Community support
- Basic analytics
- Custom domain
Growth
For teams shipping weekly.
$24 per month, billed monthly
- Unlimited projects
- Priority support
- Advanced analytics
- Deploy previews on every branch
- Team roles and permissions
Scale
For high-traffic products.
$48 per month, billed monthly
- Everything in Growth
- Dedicated support
- Audit logs and SSO
- 99.98% uptime SLA
- Quarterly architecture review
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 plan'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 nothing shifts during the roll.
The plans are composed as one ruled rail rather than a row of bordered cards. Every column is a CSS subgrid over the same five bands, name, description, price, features and action, so the prices line up across the row whether a description runs to one line or three, and the bottom edge stays level. The featured plan is the only filled surface, an inverted slab that stands proud of the rail at top and bottom in both themes.
Columns enter once on first view with a staggered rise, then the featured plan lifts to 102 percent scale with an emphasis ring. 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.
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" | Supporting annual-billing note below the billing switch; longer copy wraps without widening the control. |
| className | string | undefined | Additional classes merged onto the section. |
Customisation
Toggle Pricing Cards declares no tokens of its own. The rail, its hairlines, the switch and the CTAs paint with the global background, foreground, muted, border and ring semantic tokens, and the featured 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 free for personal and commercial projects under MIT with the Commons Clause condition. Keep the copyright, licence and Commons Clause notices in the source. You may not sell the components themselves or repackage them for sale as a component library, template pack or UI kit; that requires a separate agreement.
- 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.