{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pricing-calculator", "title": "Pricing Calculator", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/pricing-calculator/PricingCalculator.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRight, Check, HardDrive, Headphones, KeyRound, ShieldCheck, Users, Zap } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { Slider } from '@/components/ui/slider'\nimport { Switch } from '@/components/ui/switch'\n\ninterface RequestTier {\n label: string\n requests: number\n cost: number\n}\n\ninterface StorageTier {\n label: string\n gb: number\n cost: number\n}\n\nconst REQUEST_TIERS: RequestTier[] = [\n { label: '10K requests', requests: 10_000, cost: 0 },\n { label: '50K requests', requests: 50_000, cost: 25 },\n { label: '100K requests', requests: 100_000, cost: 60 },\n { label: '250K requests', requests: 250_000, cost: 120 },\n { label: '500K requests', requests: 500_000, cost: 220 },\n { label: '1M requests', requests: 1_000_000, cost: 400 },\n { label: '2.5M requests', requests: 2_500_000, cost: 750 },\n { label: '5M requests', requests: 5_000_000, cost: 1200 },\n]\n\nconst STORAGE_TIERS: StorageTier[] = [\n { label: '100 GB', gb: 100, cost: 10 },\n { label: '250 GB', gb: 250, cost: 25 },\n { label: '500 GB', gb: 500, cost: 45 },\n { label: '1 TB', gb: 1_000, cost: 80 },\n { label: '2 TB', gb: 2_000, cost: 150 },\n { label: '5 TB', gb: 5_000, cost: 320 },\n { label: '10 TB', gb: 10_000, cost: 580 },\n]\n\nconst SEAT_PRICE = 15\nconst SUPPORT_MANAGER_PRICE = 200\nconst CUSTOM_SLA_PRICE = 500\nconst SSO_PRICE = 100\n\nconst SEAT_MARKS = {\n 1: '1',\n 25: '25',\n 50: '50',\n 75: '75',\n 100: '100',\n}\n\nconst REQUEST_MARKS = {\n 0: '10K',\n 2: '100K',\n 4: '500K',\n 7: '5M',\n}\n\nconst STORAGE_MARKS = {\n 0: '100 GB',\n 2: '500 GB',\n 4: '2 TB',\n 6: '10 TB',\n}\n\nexport function PricingCalculator({ className }: { className?: string }) {\n const [isAnnual, setIsAnnual] = React.useState(true)\n const [seats, setSeats] = React.useState(12)\n const [requestIndex, setRequestIndex] = React.useState(2)\n const [storageIndex, setStorageIndex] = React.useState(2)\n const [addonSupport, setAddonSupport] = React.useState(false)\n const [addonSla, setAddonSla] = React.useState(false)\n const [addonSso, setAddonSso] = React.useState(true)\n\n const currentRequestTier = REQUEST_TIERS[requestIndex] ?? REQUEST_TIERS[0]\n const currentStorageTier = STORAGE_TIERS[storageIndex] ?? STORAGE_TIERS[0]\n\n const seatTier = React.useMemo(() => {\n if (seats <= 5) return { label: 'Starter Team', variant: 'secondary' as const }\n if (seats <= 25) return { label: 'Growth Team', variant: 'outline' as const }\n return { label: 'Scale Team', variant: 'default' as const }\n }, [seats])\n\n const recommendedPlan = React.useMemo(() => {\n if (addonSla || requestIndex >= 6 || storageIndex >= 5 || seats >= 30) {\n return { name: 'Enterprise', badge: 'Enterprise Plan', baseFee: 199, variant: 'default' as const }\n }\n if (seats >= 8 || requestIndex >= 3 || storageIndex >= 3 || addonSupport) {\n return { name: 'Growth', badge: 'Growth Plan', baseFee: 79, variant: 'default' as const }\n }\n return { name: 'Starter', badge: 'Starter Plan', baseFee: 29, variant: 'secondary' as const }\n }, [addonSla, requestIndex, storageIndex, seats, addonSupport])\n\n const baseCost = recommendedPlan.baseFee\n const seatsCost = seats * SEAT_PRICE\n const requestsCost = currentRequestTier.cost\n const storageCost = currentStorageTier.cost\n const addonsCost =\n (addonSupport ? SUPPORT_MANAGER_PRICE : 0) + (addonSla ? CUSTOM_SLA_PRICE : 0) + (addonSso ? SSO_PRICE : 0)\n\n const activeAddonsCount = (addonSupport ? 1 : 0) + (addonSla ? 1 : 0) + (addonSso ? 1 : 0)\n\n const subtotalMonthly = baseCost + seatsCost + requestsCost + storageCost + addonsCost\n const discountMultiplier = isAnnual ? 0.8 : 1.0\n const totalMonthly = Math.round(subtotalMonthly * discountMultiplier)\n const totalAnnual = totalMonthly * 12\n const annualSavings = Math.round(subtotalMonthly * 0.2 * 12)\n\n return (\n \n
\n \n \n Pricing Calculator\n \n
\n

\n Interactive Pricing Calculator\n

\n

\n Calculate your exact monthly or annual investment based on usage.\n

\n
\n\n
\n \n Monthly\n \n \n \n Pay Annually\n \n \n Save 20%\n \n
\n
\n\n
\n
\n \n \n Capacity & Scale\n Configure team seats, API request throughput, and dedicated storage.\n \n \n
\n
\n
\n
\n \n
\n
\n Team Seats\n \n {seatTier.label}\n \n
\n
\n
\n {seats}\n seats (${seats * SEAT_PRICE}/mo)\n
\n
\n
\n `${val} seats`}\n onValueChange={(val) => setSeats(val[0])}\n />\n
\n

\n Full workspace access, fine-grained permission controls, and audit log tracking for each member.\n

\n
\n\n \n\n
\n
\n
\n
\n \n
\n
\n Monthly API Requests\n
\n
\n
\n \n {currentRequestTier.label}\n \n \n {' '}\n ({currentRequestTier.cost === 0 ? 'Included' : `+$${currentRequestTier.cost}/mo`})\n \n
\n
\n
\n REQUEST_TIERS[idx]?.label ?? ''}\n onValueChange={(val) => setRequestIndex(val[0])}\n />\n
\n

\n Globally distributed edge endpoints, automatic rate limiting, and sub-50ms p99 latency SLA.\n

\n
\n\n \n\n
\n
\n
\n
\n \n
\n
\n Dedicated Cloud Storage\n
\n
\n
\n \n {currentStorageTier.label}\n \n (+${currentStorageTier.cost}/mo)\n
\n
\n
\n STORAGE_TIERS[idx]?.label ?? ''}\n onValueChange={(val) => setStorageIndex(val[0])}\n />\n
\n

\n Encrypted at rest (AES-256) with multi-region automated replication and daily disaster backups.\n

\n
\n \n \n\n \n \n Enterprise Add-ons\n \n Enhance your infrastructure with enterprise compliance, reliability, and support.\n \n \n \n
\n
\n
\n \n
\n
\n
\n Dedicated Support Manager\n \n +$200/mo\n \n
\n

\n Direct Slack channel, named technical account manager & 1-hour response SLA.\n

\n
\n
\n
\n \n
\n
\n\n
\n
\n
\n \n
\n
\n
\n Custom SLA Guarantee\n \n +$500/mo\n \n
\n

\n 99.99% uptime guarantee with financial commitments and priority disaster recovery.\n

\n
\n
\n
\n \n
\n
\n\n
\n
\n
\n \n
\n
\n
\n Single Sign-On (SSO / SAML)\n \n +$100/mo\n \n
\n

\n Okta, Azure AD, Google Workspace, and SAML 2.0 enterprise identity integration.\n

\n
\n
\n
\n \n
\n
\n \n \n
\n\n
\n \n \n
\n \n Estimated Investment\n \n \n {recommendedPlan.name === 'Enterprise' && }\n {recommendedPlan.badge}\n \n
\n
\n
\n \n ${totalMonthly}\n \n / month\n
\n {isAnnual ? (\n

\n Billed annually (${totalAnnual.toLocaleString('en-US')}/yr) ·\n \n {' '}\n Save ${annualSavings.toLocaleString('en-US')}/yr\n \n

\n ) : (\n

\n Billed monthly · Switch to annual to save 20% (${annualSavings.toLocaleString('en-US')}/yr)\n

\n )}\n
\n \n \n \n
\n
\n Base platform ({recommendedPlan.name})\n \n ${isAnnual ? Math.round(baseCost * 0.8) : baseCost}/mo\n \n
\n
\n \n Team seats ({seats} × ${SEAT_PRICE})\n \n \n ${isAnnual ? Math.round(seatsCost * 0.8) : seatsCost}/mo\n \n
\n
\n API throughput ({currentRequestTier.label})\n \n {requestsCost === 0\n ? 'Included'\n : `$${isAnnual ? Math.round(requestsCost * 0.8) : requestsCost}/mo`}\n \n
\n
\n Cloud storage ({currentStorageTier.label})\n \n ${isAnnual ? Math.round(storageCost * 0.8) : storageCost}/mo\n \n
\n
\n Add-ons ({activeAddonsCount} active)\n \n {addonsCost === 0 ? '$0/mo' : `$${isAnnual ? Math.round(addonsCost * 0.8) : addonsCost}/mo`}\n \n
\n {isAnnual && (\n
\n Annual discount applied\n 20% off\n
\n )}\n
\n \n
    \n
  • \n \n 14-day fully featured free trial\n
    • \n
  • \n \n No credit card required upfront\n
    • \n
  • \n \n Zero-downtime migration assistance\n
    • \n
\n \n \n \n \n \n \n
\n
\n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/PricingCalculator.tsx" } ], "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", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/slider.json", "https://uipkge.dev/r/react/switch.json" ], "description": "Interactive SaaS and API pricing calculator with dynamic seat, request throughput, and cloud storage sliders, annual billing toggle with 20% discount, enterprise add-on switches, automated tier recommendation, and sticky live estimated cost breakdown.", "categories": [ "marketing", "billing" ], "deprecated": true, "replacedBy": "pricing" }