Pricing PlansProv1.0.0
Plan cards and the table that compares them. The billing switch rolls every price to the new amount, one plan can be marked as the pick, and a plan can be Contact us. The comparison keeps plan names in view while you scroll and becomes a list per plan on phones.
pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-pricing-plansNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
Comparison
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import { PricingPlans, type PricingFeature, type PricingPlan } from "@/components/ui/lumen/blocks/pricing-plans";
const plans: PricingPlan[] = [
{ id: "starter", name: "Starter", tagline: "For trying it out", monthly: 0, yearly: 0, note: "Free forever", highlights: ["3 projects", "Community support"] },
{ id: "team", name: "Team", tagline: "For growing teams", monthly: 24, yearly: 19, featured: true, highlights: ["Unlimited projects", "SSO", "Priority support"] },
{ id: "enterprise", name: "Enterprise", tagline: "For large organisations", highlights: ["Audit log", "Custom contract"] },
];
const features: PricingFeature[] = [
{ id: "projects", label: "Projects", values: { starter: "3", team: "Unlimited", enterprise: "Unlimited" } },
{ id: "sso", label: "Single sign-on", values: { starter: false, team: true, enterprise: true } },
{ id: "audit", label: "Audit log", values: { starter: false, team: false, enterprise: true } },
];
export function Pricing() {
return (
<PricingPlans
plans={plans}
features={features}
onSelect={async (plan, period) => {
if (plan.id === "enterprise") return void (window.location.href = "/contact");
const res = await fetch("/api/checkout", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ plan: plan.id, period }) });
if (!res.ok) throw new Error("Checkout didn't open. Try again.");
window.location.href = (await res.json()).url;
}}
/>
);
}Props
plans–PricingPlan[]PricingPlan = { id, name, tagline?, monthly?, yearly?, note?, highlights?, cta?, featured?, current? }. Leave out both prices for a Contact us plan; give one to show that price in both periods.
features–PricingFeature[]Comparison rows: { id, label, group?, values: { [planId]: true | false | string } }. Omit for cards only.
period / defaultPeriod / onPeriodChange"yearly""monthly" | "yearly"The billing period, controlled or not.
onSelect–(plan, period) => unknownA plan's button was pressed. Return a promise to show progress on that button; throw to show the error under it.
currency / locale"USD" / "en-US"string / stringHow prices are written.
hideToggle–booleanNo billing switch (one period only).
Show all 7 propsShow fewer
labels–Partial<PricingPlansLabels>Every word, for i18n: the badge, Your plan, Contact us, choose(name), savings(percent) (worked out from your prices; return "" to hide), monthly / yearly, per, billedYearly(total), billedMonthly.
Source
components/ui/lumen/blocks/pricing-plans.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
