{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pricing-feature-addon-builder", "title": "Pricing Feature Addon Builder", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/pricing-feature-addon-builder/PricingFeatureAddonBuilder.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRight, Calculator, Check, CreditCard } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface PricingPlan {\n id: string\n name: string\n monthlyPrice: number\n description: string\n includedSeats: number\n}\n\nexport interface PricingAddon {\n id: string\n name: string\n monthlyPrice: number\n description: string\n category: string\n}\n\nexport interface PricingFeatureAddonBuilderProps {\n title?: string\n description?: string\n plans?: PricingPlan[]\n addons?: PricingAddon[]\n className?: string\n}\n\nconst DEFAULT_PLANS: PricingPlan[] = [\n {\n id: 'starter',\n name: 'Starter Tier',\n monthlyPrice: 29,\n description: 'For indie developers and early-stage prototypes needing unbundled speed.',\n includedSeats: 2,\n },\n {\n id: 'growth',\n name: 'Growth Core',\n monthlyPrice: 99,\n description: 'For scaling product engineering teams building high-conversion platforms.',\n includedSeats: 5,\n },\n {\n id: 'scale',\n name: 'Scale Enterprise',\n monthlyPrice: 299,\n description: 'For mission-critical production clusters requiring sub-10ms global edge delivery.',\n includedSeats: 15,\n },\n]\n\nconst DEFAULT_ADDONS: PricingAddon[] = [\n {\n id: 'dedicated-ip',\n name: 'Dedicated Static Edge IP',\n monthlyPrice: 49,\n description: 'Static IPv4/IPv6 address allocations with zero-reputation penalty.',\n category: 'Network',\n },\n {\n id: 'audit-logs',\n name: 'Immutable SOC2 Audit Logs',\n monthlyPrice: 79,\n description: 'Cryptographically signed telemetry logs with 365-day cold storage retention.',\n category: 'Security',\n },\n {\n id: 'multi-region',\n name: 'Multi-Region Active-Active Mesh',\n monthlyPrice: 129,\n description: 'Synchronized cross-continental database replicas and automatic DNS failover.',\n category: 'Reliability',\n },\n {\n id: 'priority-sla',\n name: '1-Hour Enterprise Response SLA',\n monthlyPrice: 199,\n description: 'Direct Slack / Discord hotline with senior design engineering staff.',\n category: 'Support',\n },\n]\n\nexport function PricingFeatureAddonBuilder({\n title = 'Build your custom plan with transparent, zero-surprise pricing.',\n description = 'Select your base tier, adjust seat allocations, and toggle modular enterprise add-ons with real-time invoice calculations.',\n plans = DEFAULT_PLANS,\n addons = DEFAULT_ADDONS,\n className,\n}: PricingFeatureAddonBuilderProps) {\n const [selectedPlanId, setSelectedPlanId] = React.useState('growth')\n const [selectedAddonIds, setSelectedAddonIds] = React.useState(['dedicated-ip', 'audit-logs'])\n const [seatCount, setSeatCount] = React.useState(8)\n const [isAnnual, setIsAnnual] = React.useState(true)\n\n const selectedPlan = React.useMemo(() => {\n return plans.find((p) => p.id === selectedPlanId) || plans[0]\n }, [plans, selectedPlanId])\n\n const extraSeats = React.useMemo(() => {\n return Math.max(0, seatCount - selectedPlan.includedSeats)\n }, [seatCount, selectedPlan])\n\n const extraSeatCost = React.useMemo(() => extraSeats * 15, [extraSeats])\n\n const totalAddonsCost = React.useMemo(() => {\n return addons.filter((a) => selectedAddonIds.includes(a.id)).reduce((sum, a) => sum + a.monthlyPrice, 0)\n }, [addons, selectedAddonIds])\n\n const monthlySubtotal = React.useMemo(() => {\n return selectedPlan.monthlyPrice + extraSeatCost + totalAddonsCost\n }, [selectedPlan, extraSeatCost, totalAddonsCost])\n\n const finalMonthlyRate = React.useMemo(() => {\n if (isAnnual) {\n return Math.round(monthlySubtotal * 0.8)\n }\n return monthlySubtotal\n }, [isAnnual, monthlySubtotal])\n\n const annualSavings = React.useMemo(() => {\n return (monthlySubtotal - Math.round(monthlySubtotal * 0.8)) * 12\n }, [monthlySubtotal])\n\n function toggleAddon(addonId: string) {\n if (selectedAddonIds.includes(addonId)) {\n setSelectedAddonIds(selectedAddonIds.filter((id) => id !== addonId))\n } else {\n setSelectedAddonIds([...selectedAddonIds, addonId])\n }\n }\n\n return (\n \n
\n {/* Section Header */}\n
\n \n \n Real-time Add-on Cost Synthesizer\n \n \n\n

{title}

\n\n

{description}

\n\n {/* Billing Cadence Toggle */}\n
\n \n Monthly Billing\n \n setIsAnnual(!isAnnual)}\n >\n \n \n \n Annual Billing\n \n Save 20%\n \n \n
\n
\n\n {/* Add-on Builder Workbench */}\n
\n {/* Left: Plan Selection & Addon Toggles (7 Cols) */}\n
\n {/* Step 1: Base Tier Cards */}\n
\n
\n Step 1: Choose Base Core Tier\n
\n
\n {plans.map((plan) => (\n setSelectedPlanId(plan.id)}\n >\n
\n
{plan.name}
\n
\n ${plan.monthlyPrice}\n /mo\n
\n
\n
\n Includes {plan.includedSeats} engineer seats\n
\n \n ))}\n
\n
\n\n {/* Step 2: Seat Allocation Slider */}\n \n \n
\n Engineer Team Seats\n \n {seatCount} seats (${extraSeatCost}/mo extra)\n \n
\n setSeatCount(parseInt(e.target.value))}\n className=\"accent-primary w-full cursor-pointer\"\n />\n
\n 2 seats\n 50 seats\n
\n \n \n\n {/* Step 3: Enterprise Add-ons Checklist */}\n
\n
\n Step 3: Select Modular Capabilities\n
\n
\n {addons.map((addon) => (\n toggleAddon(addon.id)}\n >\n
\n \n {selectedAddonIds.includes(addon.id) ? : null}\n
\n
\n
\n {addon.name}\n \n {addon.category}\n \n
\n
{addon.description}
\n
\n
\n\n
\n +${addon.monthlyPrice}\n /mo\n
\n \n ))}\n
\n
\n
\n\n {/* Right: Real-time Invoice Estimate Card (5 Cols) */}\n
\n \n \n
\n
\n \n Estimated Monthly Invoice\n
\n \n {isAnnual ? 'Annualized' : 'Monthly'}\n \n
\n\n {/* Price Breakdown List */}\n
\n
\n {selectedPlan.name}\n ${selectedPlan.monthlyPrice}.00\n
\n\n {extraSeats > 0 ? (\n
\n Extra Seats ({extraSeats} × $15)\n ${extraSeatCost}.00\n
\n ) : null}\n\n {addons\n .filter((a) => selectedAddonIds.includes(a.id))\n .map((addon) => (\n
\n {addon.name}\n ${addon.monthlyPrice}.00\n
\n ))}\n\n {isAnnual ? (\n
\n Annual Billing Discount (20%)\n −${monthlySubtotal - finalMonthlyRate}.00\n
\n ) : null}\n
\n\n {/* Total Sum Band */}\n
\n
Net Monthly Investment
\n
\n \n ${finalMonthlyRate}\n \n / month\n
\n {isAnnual ? (\n
\n Billed annually (${finalMonthlyRate * 12}/yr • Save ${annualSavings}/yr)\n
\n ) : null}\n
\n\n \n \n \n
\n
\n \n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/pricing-feature-addon-builder/PricingFeatureAddonBuilder.tsx" }, { "path": "packages/registry-react/blocks/pricing-feature-addon-builder/index.ts", "content": "export { PricingFeatureAddonBuilder } from './PricingFeatureAddonBuilder'\nexport type { PricingFeatureAddonBuilderProps, PricingPlan, PricingAddon } from './PricingFeatureAddonBuilder'\n", "type": "registry:block", "target": "~/components/blocks/pricing-feature-addon-builder/index.ts" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json" ], "description": "Interactive add-on pricing calculator with tier bundling, seat scaling, and real-time invoice generation.", "categories": [ "pricing", "marketing" ], "deprecated": true, "replacedBy": "pricing" }