Components
Starting preview...
Pricing block with 2 cards and a switch for monthly/annual billing
@shadcnblockscom
npx shadcn@latest add https://21st.dev/r/shadcnblockscom/pricing2import { Pricing2 } from "@/components/blocks/pricing2"
const demoData = {
heading: "Pricing",
description: "Check out our affordable pricing plans",
plans: [
{
id: "plus",
name: "Plus",
description: "For personal use",
monthlyPrice: "$19",
yearlyPrice: "$15",
features: [
{ text: "Up to 5 team members" },
{ text: "Basic components library" },
{ text: "Community support" },
{ text: "1GB storage space" },
],
button: {
text: "Purchase",
url: "https://www.shadcnblocks.com",
},
},
{
id: "pro",
name: "Pro",
description: "For professionals",
monthlyPrice: "$49",
yearlyPrice: "$35",
features: [
{ text: "Unlimited team members" },
{ text: "Advanced components" },
{ text: "Priority support" },
{ text: "Unlimited storage" },
],
button: {
text: "Purchase",
url: "https://www.shadcnblocks.com",
},
},
],
};
function Pricing2Demo() {
return <Pricing2 {...demoData} />;
}
export { Pricing2Demo };