{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-pricing-sections-custom-builder","type":"registry:block","title":"Custom Builder","files":[{"path":"components/blocks/marketing/pricing-sections/custom-builder.tsx","content":"import { useState } from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport {\n Card,\n CardContent,\n CardFooter,\n CardHeader,\n CardTitle,\n} from '@/components/ui/card';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { Label } from '@/components/ui/label';\nimport { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';\nimport { CheckIcon, PlusIcon, MinusIcon } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\n// Base plans\nconst basePlans = [\n {\n name: 'Starter',\n basePrice: 29,\n description: 'Essential features for individuals',\n includedUsers: 1,\n includedStorage: 10,\n includedProjects: 5,\n features: ['Basic analytics', 'Email support', 'API access (100 req/day)'],\n },\n {\n name: 'Business',\n basePrice: 79,\n description: 'Advanced features for teams',\n includedUsers: 5,\n includedStorage: 50,\n includedProjects: 20,\n features: [\n 'Advanced analytics',\n 'Priority support',\n 'API access (1,000 req/day)',\n 'Team collaboration',\n 'Custom domains',\n ],\n popular: true,\n },\n {\n name: 'Enterprise',\n basePrice: 199,\n description: 'Complete solution for organizations',\n includedUsers: 20,\n includedStorage: 200,\n includedProjects: 100,\n features: [\n 'Enterprise analytics',\n '24/7 phone support',\n 'API access (10,000 req/day)',\n 'Team collaboration',\n 'Custom domains',\n 'SSO authentication',\n 'Custom integrations',\n 'Dedicated account manager',\n ],\n },\n];\n\n// Add-ons\nconst addOns = [\n {\n id: 'additional-users',\n name: 'Additional Users',\n description: 'Add more users to your plan',\n pricePerUnit: 10,\n unit: 'user',\n },\n {\n id: 'additional-storage',\n name: 'Additional Storage',\n description: 'Add more storage to your plan',\n pricePerUnit: 5,\n unit: '10GB',\n },\n {\n id: 'premium-support',\n name: 'Premium Support',\n description: 'Get faster response times and dedicated support',\n price: 49,\n },\n {\n id: 'custom-training',\n name: 'Custom Training',\n description: 'Personalized training sessions for your team',\n price: 199,\n },\n];\n\nexport default function PricingSectionCustomBuilder() {\n const [selectedPlan, setSelectedPlan] = useState(basePlans[1]!);\n const [additionalUsers, setAdditionalUsers] = useState(0);\n const [additionalStorage, setAdditionalStorage] = useState(0);\n const [selectedAddOns, setSelectedAddOns] = useState([]);\n const [billingPeriod, setBillingPeriod] = useState<'monthly' | 'annually'>(\n 'monthly'\n );\n\n // Calculate total price\n const calculateTotalPrice = () => {\n let total = selectedPlan.basePrice;\n\n // Add cost for additional users\n total += additionalUsers * 10;\n\n // Add cost for additional storage\n total += additionalStorage * 5;\n\n // Add cost for selected add-ons\n selectedAddOns.forEach((id) => {\n const addOn = addOns.find((a) => a.id === id);\n if (addOn && addOn.price) {\n total += addOn.price;\n }\n });\n\n // Apply annual discount\n if (billingPeriod === 'annually') {\n total = total * 12 * 0.8; // 20% discount\n }\n\n return total;\n };\n\n // Toggle add-on selection\n const toggleAddOn = (id: string) => {\n setSelectedAddOns((prev) =>\n prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]\n );\n };\n\n // Format price with commas\n const formatPrice = (price: number) => {\n return price.toLocaleString('en-US', {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n });\n };\n\n return (\n
\n
\n
\n
\n

\n Build Your Perfect Plan\n

\n

\n Customize your plan to fit your exact needs. Only pay for what you\n use.\n

\n
\n
\n\n
\n \n setBillingPeriod(value as 'monthly' | 'annually')\n }\n >\n
\n \n Monthly\n Annually (Save 20%)\n \n
\n\n
\n
\n
\n

\n 1. Choose your base plan\n

\n
\n {basePlans.map((plan) => (\n setSelectedPlan(plan)}\n >\n \n {plan.name}\n \n \n
\n {formatPrice(plan.basePrice)}\n \n /{billingPeriod === 'monthly' ? 'mo' : 'yr'}\n \n
\n

\n {plan.description}\n

\n
\n
\n Users\n {plan.includedUsers}\n
\n
\n Storage\n {plan.includedStorage}GB\n
\n
\n Projects\n {plan.includedProjects}\n
\n
\n \n \n ))}\n
\n
\n\n
\n

\n 2. Customize your plan\n

\n \n \n
\n
\n \n
\n \n setAdditionalUsers(\n Math.max(0, additionalUsers - 1)\n )\n }\n disabled={additionalUsers === 0}\n >\n \n \n \n {additionalUsers}\n \n \n setAdditionalUsers(additionalUsers + 1)\n }\n >\n \n \n
\n
\n
\n ${addOns[0]!.pricePerUnit} per additional user per\n month\n
\n
\n\n
\n
\n \n
\n \n setAdditionalStorage(\n Math.max(0, additionalStorage - 1)\n )\n }\n disabled={additionalStorage === 0}\n >\n \n \n \n {additionalStorage}\n \n \n setAdditionalStorage(additionalStorage + 1)\n }\n >\n \n \n
\n
\n
\n ${addOns[1]!.pricePerUnit} per additional 10GB per\n month\n
\n
\n \n \n
\n\n
\n

\n 3. Select add-ons\n

\n \n \n {addOns.slice(2).map((addOn) => (\n \n toggleAddOn(addOn.id)}\n />\n
\n \n {addOn.name} - ${addOn.price}/month\n \n

\n {addOn.description}\n

\n
\n
\n ))}\n \n \n
\n
\n\n
\n
\n

Your Custom Plan

\n \n \n {selectedPlan.name} Plan\n \n \n
\n
\n Base Plan\n {formatPrice(selectedPlan.basePrice)}\n
\n {additionalUsers > 0 && (\n
\n Additional Users ({additionalUsers})\n {formatPrice(additionalUsers * 10)}\n
\n )}\n {additionalStorage > 0 && (\n
\n \n Additional Storage ({additionalStorage * 10}GB)\n \n {formatPrice(additionalStorage * 5)}\n
\n )}\n {selectedAddOns.map((id) => {\n const addOn = addOns.find((a) => a.id === id);\n if (addOn && addOn.price) {\n return (\n
\n {addOn.name}\n {formatPrice(addOn.price)}\n
\n );\n }\n return null;\n })}\n
\n\n
\n
\n \n Total {billingPeriod === 'annually' && '(per year)'}\n \n {formatPrice(calculateTotalPrice())}\n
\n {billingPeriod === 'annually' && (\n
\n Includes 20% annual discount\n
\n )}\n
\n\n
\n

Included Features:

\n
    \n {selectedPlan.features.map((feature) => (\n
  • \n \n {feature}\n
    • \n ))}\n {additionalUsers > 0 && (\n
  • \n \n \n {selectedPlan.includedUsers + additionalUsers}{' '}\n total users\n \n
    • \n )}\n {additionalStorage > 0 && (\n
  • \n \n \n {selectedPlan.includedStorage +\n additionalStorage * 10}\n GB total storage\n \n
    • \n )}\n {selectedAddOns.map((id) => {\n const addOn = addOns.find((a) => a.id === id);\n if (addOn) {\n return (\n
  • \n \n {addOn.name}\n
    • \n );\n }\n return null;\n })}\n
\n
\n \n \n \n \n \n
\n
\n
\n \n
\n\n
\n

\n Need a more customized solution?\n

\n

\n Contact our sales team for a personalized quote tailored to your\n specific requirements.\n

\n \n
\n \n
\n );\n}\n","type":"registry:component","target":"components/blocks/marketing/pricing-sections/custom-builder.tsx"},{"path":"components/ui/button.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n outline:\n \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n ghost:\n \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n destructive:\n \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default:\n \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n icon: \"size-9\",\n \"icon-xs\":\n \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\":\n \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n \"icon-lg\": \"size-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps & {\n asChild?: boolean\n }) {\n const Comp = asChild ? Slot.Root : \"button\"\n\n return (\n \n )\n}\n\nexport { Button, buttonVariants }\n","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"components/ui/card.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n return (\n img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nexport {\n Card,\n CardHeader,\n CardFooter,\n CardTitle,\n CardAction,\n CardDescription,\n CardContent,\n}\n","type":"registry:ui","target":"components/ui/card.tsx"},{"path":"components/ui/checkbox.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { CheckIcon } from \"lucide-react\"\n\nfunction Checkbox({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n svg]:size-3.5\"\n >\n \n \n \n )\n}\n\nexport { Checkbox }\n","type":"registry:ui","target":"components/ui/checkbox.tsx"},{"path":"components/ui/label.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Label as LabelPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Label({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport { Label }\n","type":"registry:ui","target":"components/ui/label.tsx"},{"path":"components/ui/tabs.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Tabs({\n className,\n orientation = \"horizontal\",\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nconst tabsListVariants = cva(\n \"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none\",\n {\n variants: {\n variant: {\n default: \"bg-muted\",\n line: \"gap-1 bg-transparent\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction TabsList({\n className,\n variant = \"default\",\n ...props\n}: React.ComponentProps &\n VariantProps) {\n return (\n \n )\n}\n\nfunction TabsTrigger({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction TabsContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n","type":"registry:ui","target":"components/ui/tabs.tsx"}],"description":"A plan builder where buyers pick features and quantities to assemble a quote. Use it for modular products where every customer needs a different mix.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}