shadcn/ui has no pricing component, so most SaaS apps start from a block and wire the toggle by hand. Pricing Switch is a free pricing section you add with one shadcn command: plan cards, a Monthly/Yearly switch and prices that roll to the new numbers. Below, the plans come from your Stripe Prices and the button opens Stripe Checkout.
import Stripe from "stripe";
import type { Plan } from "@/components/pricing-switch/PricingSwitch";
import { PricingSection } from "./pricing-section";
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
// One Stripe Product per plan, with two recurring Prices found by lookup key:
// "<plan>_monthly" and "<plan>_yearly". The card copy lives on the Product.
const PLAN_IDS = ["starter", "pro", "team"];
export const revalidate = 3600; // re-read Stripe at most once an hour
async function getPlans(): Promise<Plan[]> {
const { data } = await stripe.prices.list({
lookup_keys: PLAN_IDS.flatMap((id) => [`${id}_monthly`, `${id}_yearly`]),
active: true,
expand: ["data.product"],
});
const byKey = new Map(data.map((p) => [p.lookup_key, p]));
return PLAN_IDS.flatMap((id): Plan[] => {
const m = byKey.get(`${id}_monthly`);
const y = byKey.get(`${id}_yearly`);
if (!m?.unit_amount || !y?.unit_amount || typeof m.product !== "object" || m.product.deleted) return [];
const product = m.product;
return [{
id,
name: product.name,
description: product.description ?? "",
note: product.metadata.note || undefined,
// Pricing Switch shows whole numbers per month; amounts from Stripe are in cents
monthly: Math.round(m.unit_amount / 100),
yearly: Math.round(y.unit_amount / 100 / 12),
cta: product.metadata.cta || `Choose ${product.name}`,
features: product.marketing_features.flatMap((f) => (f.name ? [f.name] : [])),
featured: product.metadata.featured === "true",
}];
});
}
export default async function PricingPage() {
const plans = await getPlans();
return <PricingSection plans={plans} />;
}"use client";
import { PricingSwitch, type Plan } from "@/components/pricing-switch/PricingSwitch";
export function PricingSection({ plans }: { plans: Plan[] }) {
// send only the plan id and period; the server looks the price up again
const choose = async (plan: Plan, yearly: boolean) => {
const res = await fetch("/api/checkout", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ plan: plan.id, yearly }),
});
const { url } = (await res.json()) as { url?: string | null };
if (res.ok && url) window.location.assign(url);
};
return (
<PricingSwitch
plans={plans}
onSelect={choose}
yearlyBadge="2 months free"
header={
<div>
<h2 className="text-3xl font-semibold tracking-tight">Pricing</h2>
<p className="text-muted-foreground">Switch to yearly and the prices roll to the new numbers.</p>
</div>
}
/>
);
}import Stripe from "stripe";
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
const PLAN_IDS = new Set(["starter", "pro", "team"]);
export async function POST(req: Request) {
const { plan, yearly } = (await req.json()) as { plan?: string; yearly?: boolean };
if (!plan || !PLAN_IDS.has(plan)) return Response.json({ error: "Unknown plan" }, { status: 400 });
const { data } = await stripe.prices.list({
lookup_keys: [`${plan}_${yearly ? "yearly" : "monthly"}`],
active: true,
limit: 1,
});
if (!data[0]) return Response.json({ error: "Price not found" }, { status: 404 });
const origin = new URL(req.url).origin;
const session = await stripe.checkout.sessions.create({
mode: "subscription",
line_items: [{ price: data[0].id, quantity: 1 }],
success_url: `${origin}/billing?session_id={CHECKOUT_SESSION_ID}`,
cancel_url: `${origin}/pricing`,
});
return Response.json({ url: session.url });
}npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/pricing-switch.jsonAll comparisons, with prices read on each library's own site.
From the blog: Monthly/Yearly Pricing Toggle in React and Tailwind
From the blog: Animated Pricing Cards in Tailwind Without Framer Motion
No. It has Card, Badge and Button, but no pricing section. Pricing Switch is a free one you add with one shadcn command.
Use a component that owns both prices per plan and switches between them, like Pricing Switch. Pass monthly and yearly for each plan, and onSelect tells you which plan and period was picked.
Yes. Read the Prices by lookup key on the server, map them to plans, and pass them in, as app/pricing/page.tsx does. revalidate keeps it from calling Stripe on every request.
Not in this component. It rolls whole digits, so round to whole units.
onSelect posts the plan id and period to a route that creates a Checkout Session and returns its URL, then the browser goes there.
Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.
Yes. MIT licence, no email needed for the registry install.
Yes. The folder has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code.