{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["button"],"name":"pricing-3","description":"Three-card pricing with plan icons and feature comparison.","categories":["pricing"],"files":[{"path":"registry/blocks/pricing/3/pricing-section.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport * as PricingCard from \"@/components/pricing-card\";\n\nexport function PricingSection() {\n\treturn (\n\t\t<section className=\"w-full\">\n\t\t\t<div className=\"mx-auto mb-4 max-w-md space-y-2\">\n\t\t\t\t<div className=\"flex justify-center\">\n\t\t\t\t\t<div className=\"rounded-md border px-4 py-1 text-sm\">Pricing</div>\n\t\t\t\t</div>\n\t\t\t\t<h2 className=\"text-center font-bold text-2xl tracking-tight md:text-3xl lg:font-extrabold lg:text-4xl\">\n\t\t\t\t\tPlans that Scale with You\n\t\t\t\t</h2>\n\t\t\t\t<p className=\"text-center text-muted-foreground text-sm md:text-base\">\n\t\t\t\t\tWhether you're just starting out or growing fast, our flexible pricing\n\t\t\t\t\thas you covered.\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t\t<div className=\"mx-auto grid w-full max-w-4xl gap-4 p-6 md:grid-cols-3\">\n\t\t\t\t{plans.map((plan, index) => (\n\t\t\t\t\t<PricingCard.Card\n\t\t\t\t\t\tclassName={cn(\"w-full max-w-full\", index === 1 && \"md:scale-105\")}\n\t\t\t\t\t\tkey={plan.name}\n\t\t\t\t\t>\n\t\t\t\t\t\t<PricingCard.Header isPopular={index === 1}>\n\t\t\t\t\t\t\t<PricingCard.Plan>\n\t\t\t\t\t\t\t\t<PricingCard.PlanName>\n\t\t\t\t\t\t\t\t\t{plan.icon}\n\t\t\t\t\t\t\t\t\t<span>{plan.name}</span>\n\t\t\t\t\t\t\t\t</PricingCard.PlanName>\n\t\t\t\t\t\t\t\t{plan.badge && (\n\t\t\t\t\t\t\t\t\t<PricingCard.Badge>{plan.badge}</PricingCard.Badge>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</PricingCard.Plan>\n\t\t\t\t\t\t\t<PricingCard.Price>\n\t\t\t\t\t\t\t\t<PricingCard.MainPrice>{plan.price}</PricingCard.MainPrice>\n\t\t\t\t\t\t\t\t<PricingCard.Period>{plan.period}</PricingCard.Period>\n\t\t\t\t\t\t\t\t{plan.original && (\n\t\t\t\t\t\t\t\t\t<PricingCard.OriginalPrice className=\"ml-auto\">\n\t\t\t\t\t\t\t\t\t\t{plan.original}\n\t\t\t\t\t\t\t\t\t</PricingCard.OriginalPrice>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</PricingCard.Price>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName={cn(\"w-full font-semibold\")}\n\t\t\t\t\t\t\t\tvariant={plan.variant as \"outline\" | \"default\"}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tGet Started\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</PricingCard.Header>\n\n\t\t\t\t\t\t<PricingCard.Body>\n\t\t\t\t\t\t\t<PricingCard.Description>\n\t\t\t\t\t\t\t\t{plan.description}\n\t\t\t\t\t\t\t</PricingCard.Description>\n\t\t\t\t\t\t\t<PricingCard.List>\n\t\t\t\t\t\t\t\t{plan.features.map((item) => (\n\t\t\t\t\t\t\t\t\t<PricingCard.ListItem className=\"text-xs\" key={item}>\n\t\t\t\t\t\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"size-4 text-foreground\"\n\t\t\t\t\t\t\t\t\t\t\thugeicons=\"CheckmarkCircle04Icon\"\n\t\t\t\t\t\t\t\t\t\t\tlucide=\"CheckCircle2\"\n\t\t\t\t\t\t\t\t\t\t\tphosphor=\"CheckCircleIcon\"\n\t\t\t\t\t\t\t\t\t\t\tremixicon=\"RiCheckboxCircleLine\"\n\t\t\t\t\t\t\t\t\t\t\ttabler=\"IconCircleCheck\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<span>{item}</span>\n\t\t\t\t\t\t\t\t\t</PricingCard.ListItem>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</PricingCard.List>\n\t\t\t\t\t\t</PricingCard.Body>\n\t\t\t\t\t</PricingCard.Card>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</section>\n\t);\n}\n\nconst plans = [\n\t{\n\t\ticon: (\n\t\t\t<IconPlaceholder\n\t\t\t\thugeicons=\"UserMultipleIcon\"\n\t\t\t\tlucide=\"Users\"\n\t\t\t\tphosphor=\"UsersIcon\"\n\t\t\t\tremixicon=\"RiGroupLine\"\n\t\t\t\ttabler=\"IconUsers\"\n\t\t\t/>\n\t\t),\n\t\tdescription: \"Perfect for individuals\",\n\t\tname: \"Basic\",\n\t\tprice: \"Free\",\n\t\tvariant: \"outline\",\n\t\tfeatures: [\n\t\t\t\"Automated Meeting Scheduling\",\n\t\t\t\"Basic Calendar Sync\",\n\t\t\t\"Daily Schedule Overview\",\n\t\t\t\"Email Reminders\",\n\t\t\t\"Task Management\",\n\t\t\t\"24/7 Customer Support\",\n\t\t\t\"Single User Access\",\n\t\t\t\"Basic Reporting\",\n\t\t\t\"Mobile App Access\",\n\t\t],\n\t},\n\t{\n\t\ticon: (\n\t\t\t<IconPlaceholder\n\t\t\t\thugeicons=\"Briefcase01Icon\"\n\t\t\t\tlucide=\"Briefcase\"\n\t\t\t\tphosphor=\"BriefcaseIcon\"\n\t\t\t\tremixicon=\"RiBriefcaseLine\"\n\t\t\t\ttabler=\"IconBriefcase\"\n\t\t\t/>\n\t\t),\n\t\tdescription: \"Ideal for small teams\",\n\t\tname: \"Pro\",\n\t\tbadge: \"Popular\",\n\t\tprice: \"$29\",\n\t\toriginal: \"$39\",\n\t\tperiod: \"/month\",\n\t\tvariant: \"default\",\n\t\tfeatures: [\n\t\t\t\"All Basic Plan Features\",\n\t\t\t\"Advanced Calendar Integrations\",\n\t\t\t\"Customizable Notifications\",\n\t\t\t\"Priority Support\",\n\t\t\t\"Analytics and Insights\",\n\t\t\t\"Group Scheduling\",\n\t\t\t\"Multiple User Roles\",\n\t\t\t\"Advanced Reporting\",\n\t\t\t\"Custom Branding Options\",\n\t\t],\n\t},\n\t{\n\t\ticon: (\n\t\t\t<IconPlaceholder\n\t\t\t\thugeicons=\"Building01Icon\"\n\t\t\t\tlucide=\"Building\"\n\t\t\t\tphosphor=\"BuildingsIcon\"\n\t\t\t\tremixicon=\"RiBuilding2Line\"\n\t\t\t\ttabler=\"IconBuilding\"\n\t\t\t/>\n\t\t),\n\t\tname: \"Enterprise\",\n\t\tdescription: \"Perfect for large scale companies\",\n\t\tprice: \"$99\",\n\t\toriginal: \"$129\",\n\t\tperiod: \"/month\",\n\t\tvariant: \"outline\",\n\t\tfeatures: [\n\t\t\t\"All Pro Plan Features\",\n\t\t\t\"Dedicated Account Manager\",\n\t\t\t\"Custom Integrations\",\n\t\t\t\"Advanced Security Features\",\n\t\t\t\"Team Collaboration Tools\",\n\t\t\t\"Onboarding and Training\",\n\t\t\t\"Unlimited Users\",\n\t\t\t\"API Access with Higher Limits\",\n\t\t\t\"Advanced Audit Logs\",\n\t\t],\n\t},\n];\n"},{"path":"registry/blocks/pricing/3/pricing-card.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\nimport type React from \"react\";\n\nfunction Card({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"relative w-full max-w-xs rounded-xl border bg-background p-1\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction Header({\n\tclassName,\n\tchildren,\n\tisPopular,\n\t...props\n}: React.ComponentProps<\"div\"> & {\n\tisPopular?: boolean;\n}) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"relative mb-4 rounded-xl border p-4\",\n\t\t\t\tisPopular && \"bg-card shadow-xs\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\nfunction Plan({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"mb-8 flex items-center justify-between\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction Description({ className, ...props }: React.ComponentProps<\"p\">) {\n\treturn (\n\t\t<p className={cn(\"text-muted-foreground text-xs\", className)} {...props} />\n\t);\n}\n\nfunction PlanName({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex items-center gap-2 font-medium text-sm [&_svg:not([class*='size-'])]:size-4\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction Badge({ className, ...props }: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t\"rounded-full border bg-background px-3 py-1 text-xs shadow-xs\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction Price({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div className={cn(\"mb-3 flex items-end gap-1\", className)} {...props} />\n\t);\n}\n\nfunction MainPrice({ className, ...props }: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\"font-extrabold text-3xl tracking-tight\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction Period({ className, ...props }: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\"pb-1 text-muted-foreground text-sm\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction OriginalPrice({ className, ...props }: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t\"mr-1 ml-auto text-lg text-muted-foreground line-through\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction Body({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn <div className={cn(\"space-y-6 p-3\", className)} {...props} />;\n}\n\nfunction List({ className, ...props }: React.ComponentProps<\"ul\">) {\n\treturn <ul className={cn(\"space-y-3\", className)} {...props} />;\n}\n\nfunction ListItem({ className, ...props }: React.ComponentProps<\"li\">) {\n\treturn (\n\t\t<li\n\t\t\tclassName={cn(\n\t\t\t\t\"flex items-start gap-3 text-muted-foreground text-sm\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction Separator({\n\tchildren = \"Upgrade to access\",\n\tclassName,\n\t...props\n}: React.ComponentProps<\"div\"> & {\n\tchildren?: string;\n\tclassName?: string;\n}) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex items-center gap-3 text-muted-foreground text-sm\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"h-px flex-1 bg-border\" />\n\t\t\t<span className=\"shrink-0 text-muted-foreground\">{children}</span>\n\t\t\t<span className=\"h-px flex-1 bg-border\" />\n\t\t</div>\n\t);\n}\n\nexport {\n\tCard,\n\tHeader,\n\tDescription,\n\tPlan,\n\tPlanName,\n\tBadge,\n\tPrice,\n\tMainPrice,\n\tPeriod,\n\tOriginalPrice,\n\tBody,\n\tList,\n\tListItem,\n\tSeparator,\n};\n"}]}