{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pricing", "title": "Pricing", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/pricing/Pricing01.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRight, Check, ChevronDown, ChevronUp, ShieldCheck, Users, Zap } from 'lucide-react'\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'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'\nimport { cn } from '@/lib/utils'\n\ntype BillingCycle = 'monthly' | 'yearly'\ntype Currency = 'USD' | 'EUR' | 'GBP'\n\nconst currencySymbols: Record = {\n USD: '$',\n EUR: '€',\n GBP: '£',\n}\n\nconst currencyRates: Record = {\n USD: 1.0,\n EUR: 0.92,\n GBP: 0.79,\n}\n\nconst comparisonMatrix = [\n {\n category: 'Platform & Compute Core',\n features: [\n { name: 'Active Team Members', starter: 'Up to 10', team: 'Unlimited', enterprise: 'Unlimited + Org Units' },\n { name: 'Monthly API Requests', starter: '100,000 / mo', team: '2,500,000 / mo', enterprise: 'Custom Unlimited' },\n { name: 'Workflow Automations', starter: '10 active', team: '100 active', enterprise: 'Unlimited real-time' },\n { name: 'Data Retention History', starter: '30 days', team: '365 days', enterprise: '7 years immutable' },\n ],\n },\n {\n category: 'Security & Enterprise Governance',\n features: [\n {\n name: 'SOC 2 Type II & ISO 27001',\n starter: 'Standard',\n team: 'Included',\n enterprise: 'Included + Auditor Portal',\n },\n { name: 'SAML SSO & SCIM Provisioning', starter: '—', team: 'Google / Okta', enterprise: 'Custom IdP + SCIM v2' },\n {\n name: 'Role-Based Access (RBAC)',\n starter: '3 predefined roles',\n team: 'Granular permissions',\n enterprise: 'Custom policy engine',\n },\n {\n name: 'Immutable Audit Trail Logs',\n starter: '—',\n team: '90 days exportable',\n enterprise: 'Real-time SIEM streaming',\n },\n ],\n },\n {\n category: 'Support & Success SLAs',\n features: [\n {\n name: 'Support Channel',\n starter: 'Community & Email',\n team: 'Priority Email + Chat',\n enterprise: 'Dedicated Private Slack',\n },\n {\n name: 'First-Response SLA',\n starter: '24 business hours',\n team: '4 business hours',\n enterprise: '< 15 mins (24/7/365)',\n },\n { name: 'Uptime SLA Guarantee', starter: '99.9%', team: '99.95%', enterprise: '99.99% financially backed' },\n { name: 'Dedicated Solutions Architect', starter: '—', team: '—', enterprise: 'Assigned Principal Engineer' },\n ],\n },\n]\n\nexport function Pricing01({ className }: { className?: string }) {\n const [billingCycle, setBillingCycle] = React.useState('yearly')\n const [currency, setCurrency] = React.useState('USD')\n const [teamSeats, setTeamSeats] = React.useState([12])\n const [addDedicatedSla, setAddDedicatedSla] = React.useState(false)\n const [addAuditVault, setAddAuditVault] = React.useState(false)\n const [showComparisonTable, setShowComparisonTable] = React.useState(false)\n\n const rates = currencyRates[currency]\n const sym = currencySymbols[currency]\n\n const starterBase = billingCycle === 'yearly' ? 12 : 15\n const teamBase = billingCycle === 'yearly' ? 28 : 35\n const enterpriseBase = billingCycle === 'yearly' ? 68 : 85\n\n const slaCost = addDedicatedSla ? 99 : 0\n const vaultCost = addAuditVault ? 49 : 0\n\n const currentSeats = teamSeats[0] || 1\n\n const starterMonthlyTotal = Math.round((starterBase * currentSeats + (addAuditVault ? 29 : 0)) * rates)\n const teamMonthlyTotal = Math.round((teamBase * currentSeats + slaCost + vaultCost) * rates)\n const enterpriseMonthlyTotal = Math.round((enterpriseBase * currentSeats + slaCost + vaultCost) * rates)\n\n const annualSavingsTeam = Math.round((35 * currentSeats * 12 - 28 * currentSeats * 12) * rates)\n\n return (\n
\n
\n {/* Section Header */}\n
\n
\n \n Predictable Enterprise Pricing\n
\n

\n Scale effortlessly without seat tax surprises\n

\n

\n Zero setup fees, transparent volume discounts, and instant self-serve provisioning. Switch or cancel plans\n anytime.\n

\n\n {/* Billing Cycle & Currency Switcher Toolbar */}\n
\n {/* Monthly vs Yearly */}\n
\n v && setBillingCycle(v as BillingCycle)}\n >\n \n Monthly\n \n \n Annual\n \n Save 20%\n \n \n \n
\n\n {/* Currency Selector */}\n
\n v && setCurrency(v as Currency)}>\n \n USD ($)\n \n \n EUR (€)\n \n \n GBP (£)\n \n \n
\n
\n\n {/* Interactive Team Seat Simulator Bar */}\n
\n
\n
\n \n Simulate Team Size:\n
\n
\n \n {currentSeats} {currentSeats === 1 ? 'seat' : 'seats'}\n \n {billingCycle === 'yearly' && annualSavingsTeam > 0 && (\n \n (Saves ~{sym}\n {annualSavingsTeam.toLocaleString()}/yr on Team plan)\n \n )}\n
\n
\n
\n \n
\n
\n 1 seat\n 25 seats\n 50+ seats\n
\n
\n
\n\n {/* Plan Cards Grid */}\n
\n {/* Tier 1: Starter */}\n \n
\n \n
\n \n Bootstrap & Indie\n \n
\n Starter Studio\n \n For agile squads and early-stage product teams validating core workflows.\n \n\n
\n
\n \n {sym}\n {Math.round(starterBase * rates)}\n \n / seat / month\n
\n
\n Est. {sym}\n {starterMonthlyTotal.toLocaleString()}/mo for {currentSeats} {currentSeats === 1 ? 'seat' : 'seats'}\n
\n
\n \n\n \n \n
\n

\n Included features\n

\n
    \n
  • \n \n Up to 10 team seats & unlimited guests\n
    • \n
  • \n \n 100,000 monthly API event calls\n
    • \n
  • \n \n 30-day continuous audit & revision history\n
    • \n
  • \n \n Standard Community & Email support (24h)\n
    • \n
  • \n \n Community Discord access & quickstarts\n
    • \n
\n
\n \n
\n\n \n \n \n \n\n {/* Tier 2: Team Pro (Highlighted Flagship) */}\n \n
\n \n \n Most Popular Choice\n \n
\n\n
\n \n
\n \n Scale & High-Growth\n \n
\n Team Scale\n \n For fast-scaling engineering and product organizations requiring deep automation.\n \n\n
\n
\n \n {sym}\n {Math.round(teamBase * rates)}\n \n / seat / month\n
\n
\n Est. {sym}\n {teamMonthlyTotal.toLocaleString()}/mo for {currentSeats} {currentSeats === 1 ? 'seat' : 'seats'}\n
\n
\n \n\n \n \n
\n

\n Everything in Starter, plus\n

\n
    \n
  • \n \n Unlimited team seats & custom workspace roles\n
    • \n
  • \n \n 2.5M monthly API calls & priority queue\n
    • \n
  • \n \n Google & Okta SAML SSO integration\n
    • \n
  • \n \n 365-day immutable compliance logs\n
    • \n
  • \n \n Priority ticketing with 4h guaranteed SLA\n
    • \n
\n
\n\n {/* Addons Selector for Team */}\n
\n

Optional Power Add-ons

\n
\n \n \n
\n
\n \n \n
\n
\n \n
\n\n \n \n \n \n\n {/* Tier 3: Enterprise Platform */}\n \n
\n \n
\n \n Enterprise & Security\n \n
\n Enterprise Suite\n \n Dedicated infrastructure, custom security controls, and bespoke compliance SLAs.\n \n\n
\n
\n \n {sym}\n {Math.round(enterpriseBase * rates)}\n \n / seat / month\n
\n
\n Custom volume licensing available for 100+ seats\n
\n
\n \n\n \n \n
\n

\n Everything in Team, plus\n

\n
    \n
  • \n \n Custom SCIM v2 user provisioning & directory sync\n
    • \n
  • \n \n Dedicated VPC peering & custom data residency\n
    • \n
  • \n \n 99.99% uptime SLA with financial penalty backing\n
    • \n
  • \n \n Assigned Principal Solutions Engineer & private Slack\n
    • \n
  • \n \n Custom Master Service Agreement (MSA) & DPA\n
    • \n
\n
\n \n
\n\n \n \n \n \n
\n\n {/* Collapsible Feature Matrix Trigger */}\n
\n setShowComparisonTable(!showComparisonTable)}\n >\n \n {showComparisonTable ? 'Hide Detailed Feature Comparison' : 'Compare All Features & Enterprise Limits'}\n \n {showComparisonTable ? : }\n \n
\n\n {/* Feature Comparison Matrix Table */}\n {showComparisonTable && (\n
\n
\n
\n

Detailed Specification & Limits

\n

Comprehensive side-by-side breakdown across every tier.

\n
\n \n All plans include SSL & automated backups\n \n
\n\n
\n \n \n \n Capabilities\n Starter Studio\n Team Scale\n Enterprise Suite\n \n \n \n {comparisonMatrix.map((group, idx) => (\n \n \n \n {group.category}\n \n \n {group.features.map((feat, fIdx) => (\n \n {feat.name}\n {feat.starter}\n {feat.team}\n {feat.enterprise}\n \n ))}\n \n ))}\n \n
\n
\n
\n )}\n
\n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/pricing/Pricing01.tsx" }, { "path": "packages/registry-react/blocks/pricing/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/pricing/PricingCalculator.tsx" }, { "path": "packages/registry-react/blocks/pricing/PricingEnterpriseSlaCard.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRight, Building2, Calendar, CheckCircle2, Lock, Server } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { cn } from '@/lib/utils'\n\nexport interface SlaGuarantee {\n title: string\n metric: string\n description: string\n icon: string\n}\n\nexport interface ComplianceCert {\n id: string\n name: string\n status: string\n badgeVariant?: 'default' | 'outline' | 'secondary'\n}\n\nexport interface PricingEnterpriseSlaCardProps {\n title?: string\n description?: string\n guarantees?: SlaGuarantee[]\n certifications?: ComplianceCert[]\n className?: string\n}\n\nconst DEFAULT_GUARANTEES: SlaGuarantee[] = [\n {\n title: 'High-Availability SLA',\n metric: '99.999%',\n description: 'Financial penalty-backed monthly uptime commitment across multi-region clusters.',\n icon: 'ShieldCheck',\n },\n {\n title: 'P1 Incident Response',\n metric: '< 15 mins',\n description: 'Direct paging to designated Staff Infrastructure Commanders 24/7/365.',\n icon: 'Headphones',\n },\n {\n title: 'Global Edge TTFB',\n metric: '< 12ms',\n description: 'Sub-15ms Time-To-First-Byte guaranteed via Anycast network mesh.',\n icon: 'Zap',\n },\n {\n title: 'Custom Legal & DPA',\n metric: 'Bespoke',\n description: 'Dedicated legal counsel review, redline allowances, and customized BAAs.',\n icon: 'Scale',\n },\n]\n\nconst DEFAULT_CERTS: ComplianceCert[] = [\n { id: 'soc2', name: 'SOC 2 Type II Certified', status: 'Continuous Audit' },\n { id: 'hipaa', name: 'HIPAA Compliant BAA', status: 'Available' },\n { id: 'iso27001', name: 'ISO/IEC 27001:2022', status: 'Certified' },\n { id: 'gdpr', name: 'GDPR & CCPA Verified', status: 'Compliant' },\n { id: 'fedramp', name: 'FedRAMP In-Process', status: 'High Baseline' },\n]\n\nexport function PricingEnterpriseSlaCard({\n title = 'Mission-critical infrastructure with contractual legal guarantees.',\n description = 'Tailored enterprise licensing, custom security reviews, isolated VPC deployments, and white-glove migration engineering.',\n guarantees = DEFAULT_GUARANTEES,\n certifications = DEFAULT_CERTS,\n className,\n}: PricingEnterpriseSlaCardProps) {\n const [isMeetingRequested, setIsMeetingRequested] = React.useState(false)\n\n function requestMeeting() {\n setIsMeetingRequested(true)\n setTimeout(() => {\n setIsMeetingRequested(false)\n }, 3000)\n }\n\n return (\n \n
\n {/* Section Header */}\n
\n \n \n Enterprise Custom Contracting\n \n \n\n

{title}

\n\n

{description}

\n
\n\n {/* Main Enterprise Showcase Container */}\n
\n
\n {/* Left: SLA Guarantees & Contractual Commitments (7 Cols) */}\n
\n
\n
Service Level Agreement
\n

Penalty-Backed Contractual Metrics

\n

\n Every commitment is codified into your master service agreement with direct financial remedies.\n

\n
\n\n {/* Guarantees 2x2 Grid */}\n
\n {guarantees.map((item, idx) => (\n
\n
\n {item.title}\n {item.metric}\n
\n

{item.description}

\n
\n ))}\n
\n\n {/* Compliance & Governance Strip */}\n
\n
\n \n Security & Regulatory Attestations\n
\n
\n {certifications.map((cert) => (\n \n \n {cert.name}\n ({cert.status})\n \n ))}\n
\n
\n
\n\n {/* Right: Direct Enterprise Solution Consultation Card (5 Cols) */}\n
\n
\n
\n
\n \n Custom Private Deployment\n
\n \n Tailored\n \n
\n\n
\n
Included with Custom Tier:
\n
    \n
  • \n \n Dedicated AWS / GCP VPC peering or self-hosted air-gap\n
    • \n
  • \n \n Custom SAML 2.0 / Okta / Azure AD SCIM provisioning\n
    • \n
  • \n \n Dedicated Solution Architect & design system migration team\n
    • \n
  • \n \n Invoiced payment via ACH, Wire Transfer, or AWS Marketplace\n
    • \n
\n
\n
\n\n {/* Action Block */}\n
\n \n
\n Average executive response time: under 20 minutes\n
\n
\n
\n
\n
\n
\n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/pricing/PricingEnterpriseSlaCard.tsx" }, { "path": "packages/registry-react/blocks/pricing/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/PricingFeatureAddonBuilder.tsx" }, { "path": "packages/registry-react/blocks/pricing/PricingFeatureTierSlider.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRight, CheckCircle2, Sliders } 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 PricingFeatureTierSliderProps {\n title?: string\n description?: string\n className?: string\n}\n\nconst TIERS = [\n {\n label: '10K MAU',\n mauCount: '10,000',\n basePriceMonthly: 19,\n tierName: 'Starter Hobbyist',\n features: [\n '10,000 Monthly Users',\n '2 Dedicated Edge Locations',\n 'Community Discord SLA',\n 'Standard 1-Day Log Retention',\n ],\n },\n {\n label: '50K MAU',\n mauCount: '50,000',\n basePriceMonthly: 49,\n tierName: 'Pro Creator',\n features: [\n '50,000 Monthly Users',\n '12 Global Anycast Edges',\n 'Next-Business-Day Support SLA',\n '7-Day Immutable Log Retention',\n ],\n },\n {\n label: '250K MAU',\n mauCount: '250,000',\n basePriceMonthly: 149,\n tierName: 'Growth Scale',\n features: [\n '250,000 Monthly Users',\n 'All 36 Global Edge Regions',\n '4-Hour Priority Engineering SLA',\n '30-Day SOC2 Audit Logs',\n ],\n },\n {\n label: '1M MAU',\n mauCount: '1,000,000',\n basePriceMonthly: 399,\n tierName: 'Enterprise Core',\n features: [\n '1,000,000 Monthly Users',\n 'Dedicated VPC & Multi-Region Mesh',\n '15-Minute Critical Incident SLA',\n '365-Day Cold Storage Logs',\n ],\n },\n {\n label: '5M+ MAU',\n mauCount: '5,000,000+',\n basePriceMonthly: 899,\n tierName: 'Hyperscale Cluster',\n features: [\n '5,000,000+ Monthly Users',\n 'Custom Bare-Metal Cloud Partitions',\n 'Dedicated Solutions Architect',\n 'Custom Security Review & BAA',\n ],\n },\n]\n\nexport function PricingFeatureTierSlider({\n title = 'Predictable usage pricing with dynamic linear scale.',\n description = 'Slide to your estimated monthly active users or edge invocations to calculate your exact monthly investment.',\n className,\n}: PricingFeatureTierSliderProps) {\n const [sliderIndex, setSliderIndex] = React.useState(2)\n const [isAnnual, setIsAnnual] = React.useState(true)\n\n const currentTier = TIERS[sliderIndex]\n const effectivePrice = isAnnual ? Math.round(currentTier.basePriceMonthly * 0.8) : currentTier.basePriceMonthly\n const annualSavings = (currentTier.basePriceMonthly - effectivePrice) * 12\n\n return (\n \n
\n {/* Section Header */}\n
\n \n \n Continuous Scale Synthesizer\n \n \n\n

{title}

\n\n

{description}

\n\n {/* Cadence Switcher */}\n
\n \n Monthly\n \n setIsAnnual(!isAnnual)}\n >\n \n \n \n Annual Billing\n \n Save 20%\n \n \n
\n
\n\n {/* Pricing Slider Main Card */}\n
\n \n \n {/* Scale Indicator Bar */}\n
\n
\n \n Calculated Tier Plan\n \n

{currentTier.tierName}

\n
\n Engineered for {currentTier.mauCount} active user sessions\n
\n
\n\n {/* Price Box */}\n
\n
\n ${effectivePrice}\n / month\n
\n {isAnnual ? (\n
Save ${annualSavings}/yr on annual
\n ) : null}\n
\n
\n\n {/* Interactive Stepped Range Slider */}\n
\n
\n Monthly Traffic Volume\n {currentTier.mauCount} Users\n
\n\n setSliderIndex(parseInt(e.target.value))}\n className=\"accent-primary h-2 w-full cursor-pointer\"\n />\n\n {/* Slider Step Labels */}\n
\n {TIERS.map((t, idx) => (\n setSliderIndex(idx)}\n >\n {t.label}\n \n ))}\n
\n
\n\n {/* Features Checklist Grid for Current Tier */}\n
\n \n Guaranteed Tier Deliverables\n \n
\n {currentTier.features.map((feat, fIdx) => (\n
\n \n {feat}\n
\n ))}\n
\n
\n\n {/* Action Button */}\n
\n \n
\n \n \n
\n
\n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/pricing/PricingFeatureTierSlider.tsx" }, { "path": "packages/registry-react/blocks/pricing/PricingMatrixGrouped.tsx", "content": "'use client'\n\nimport { useState } from 'react'\nimport { Check, ChevronDown, Minus } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableRow } from '@/components/ui/table'\n\nconst plans = ['Team', 'Business', 'Enterprise']\n\nconst groups: {\n id: string\n label: string\n summary: string\n rows: { feature: string; values: (boolean | string)[] }[]\n}[] = [\n {\n id: 'modelling',\n label: 'Modelling',\n summary: 'Definitions, versioning, and review',\n rows: [\n { feature: 'Certified definitions', values: ['50', '500', 'Unlimited'] },\n { feature: 'Version history', values: ['30 days', 'Unlimited', 'Unlimited'] },\n { feature: 'Required review', values: [false, true, true] },\n { feature: 'Period locking', values: [false, true, true] },\n ],\n },\n {\n id: 'access',\n label: 'Access & identity',\n summary: 'Who sees which rows',\n rows: [\n { feature: 'SSO (SAML)', values: [true, true, true] },\n { feature: 'SCIM provisioning', values: [false, true, true] },\n { feature: 'Row-level scope', values: [false, true, true] },\n { feature: 'Customer-managed keys', values: [false, false, true] },\n ],\n },\n {\n id: 'ops',\n label: 'Operations',\n summary: 'Cost, alerting, and support',\n rows: [\n { feature: 'Query budgets', values: [false, true, true] },\n { feature: 'Drift alerting', values: [false, true, true] },\n { feature: 'Audit log export', values: [false, '90 days', 'Unlimited'] },\n { feature: 'Named support engineer', values: [false, false, true] },\n ],\n },\n]\n\nexport function PricingMatrixGrouped() {\n // Opens on the first group only: a fully expanded matrix is the thing readers\n // bounce off, and every group is one click from open.\n const [open, setOpen] = useState([groups[0].id])\n\n const toggle = (id: string) =>\n setOpen((current) => (current.includes(id) ? current.filter((entry) => entry !== id) : [...current, id]))\n\n return (\n
\n
\n Compare plans\n

Grouped, so it stays readable

\n\n \n \n
\n Capability\n {plans.map((plan) => (\n \n {plan}\n \n ))}\n
\n \n\n {groups.map((group) => (\n
\n toggle(group.id)}\n >\n \n \n {group.label}\n {group.summary}\n \n {group.rows.length}\n \n\n {open.includes(group.id) && (\n
\n \n \n {group.rows.map((row) => (\n \n {row.feature}\n {row.values.map((value, index) => (\n \n {value === true && (\n <>\n \n Included\n \n )}\n {value === false && (\n <>\n \n Not included\n \n )}\n {typeof value === 'string' && {value}}\n \n ))}\n \n ))}\n \n
\n
\n )}\n \n
\n ))}\n \n \n\n \n
\n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/pricing/PricingMatrixGrouped.tsx" }, { "path": "packages/registry-react/blocks/pricing/PricingMatrixPlanCards.tsx", "content": "'use client'\n\nimport { Check, Minus } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\n\nconst capabilities = [\n 'Certified metric definitions',\n 'Connected warehouses',\n 'Query budget per team',\n 'Row-level access control',\n 'SCIM provisioning',\n 'Audit log export',\n 'Embedded dashboards',\n 'Data residency choice',\n 'Customer-managed keys',\n 'Named support engineer',\n]\n\nconst plans = [\n { name: 'Team', price: '$0', cadence: 'while in beta', included: [0, 1], note: 'For one team proving it out.' },\n {\n name: 'Business',\n price: '$1,400',\n cadence: 'per month',\n included: [0, 1, 2, 3, 4, 5, 6],\n note: 'For finance and analytics running together.',\n featured: true,\n },\n {\n name: 'Enterprise',\n price: 'Custom',\n cadence: 'annual',\n included: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n note: 'For regulated estates and multi-region.',\n },\n]\n\nexport function PricingMatrixPlanCards() {\n return (\n
\n
\n
\n Plans\n

What each plan actually includes

\n

\n The same list on every card, with what is missing shown rather than omitted.\n

\n
\n\n
\n {plans.map((plan) => (\n \n \n
\n

{plan.name}

\n {plan.featured && Most chosen}\n
\n\n

{plan.price}

\n

{plan.cadence}

\n

{plan.note}

\n\n \n\n
    \n {capabilities.map((capability, index) => (\n \n {plan.included.includes(index) ? (\n \n ) : (\n \n )}\n {capability}\n \n ))}\n
\n\n \n \n \n ))}\n
\n
\n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/pricing/PricingMatrixPlanCards.tsx" }, { "path": "packages/registry-react/blocks/pricing/PricingMatrixStickyHeader.tsx", "content": "'use client'\n\nimport { Check, Minus } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nconst plans = ['Team', 'Business', 'Enterprise']\n\n// Cells are true / false / a string, so a plan can state a limit rather than\n// only claiming a feature exists.\nconst rows: { feature: string; values: (boolean | string)[] }[] = [\n { feature: 'Certified metric definitions', values: ['50', '500', 'Unlimited'] },\n { feature: 'Connected warehouses', values: ['1', '3', 'Unlimited'] },\n { feature: 'Query budget per team', values: [false, true, true] },\n { feature: 'Row-level access control', values: [false, true, true] },\n { feature: 'SCIM provisioning', values: [false, true, true] },\n { feature: 'Audit log export', values: [false, '90 days', 'Unlimited'] },\n { feature: 'Period locking', values: [false, true, true] },\n { feature: 'Embedded dashboards', values: [false, true, true] },\n { feature: 'Data residency choice', values: [false, false, true] },\n { feature: 'Customer-managed keys', values: [false, false, true] },\n { feature: 'Private link', values: [false, false, true] },\n { feature: 'Named support engineer', values: [false, false, true] },\n]\n\nexport function PricingMatrixStickyHeader() {\n return (\n
\n
\n Compare plans\n

Every line, no asterisks

\n

\n Limits differ between plans. Where a plan caps something, the cap is written in the cell.\n

\n\n \n \n {/* The header pins with CSS alone. Thirty rows down, a checkmark is\n still attributable to a column without scrolling back up. */}\n
\n \n \n \n Capability\n {plans.map((plan) => (\n \n {plan}\n \n ))}\n \n \n \n {rows.map((row) => (\n \n {row.feature}\n {row.values.map((value, index) => (\n \n {value === true && (\n <>\n \n Included\n \n )}\n {value === false && (\n <>\n \n Not included\n \n )}\n {typeof value === 'string' && {value}}\n \n ))}\n \n ))}\n \n
\n
\n \n \n\n
\n \n \n
\n
\n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/pricing/PricingMatrixStickyHeader.tsx" }, { "path": "packages/registry-react/blocks/pricing/PricingSinglePlan.tsx", "content": "'use client'\n\nimport { ArrowRight, Check, X } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\n\nconst included = [\n 'Unlimited certified metric definitions',\n 'Unlimited viewers and editors',\n 'Row-level access from your identity provider',\n 'Query budgets enforced per team',\n 'Audit log export, 7-year retention',\n 'SOC 2 report under NDA',\n]\n\n// Naming exclusions is what makes a single plan credible. A list of only\n// inclusions invites the reader to assume the gap is hidden somewhere.\nconst excluded = [\n 'On-premise deployment behind your firewall',\n 'Custom SLAs below 99.9%',\n 'Professional services beyond the five-week rollout',\n]\n\nexport function PricingSinglePlan() {\n return (\n
\n
\n
\n Pricing\n

One plan, one number

\n

\n No seat maths and no feature gates. The only thing that scales is query volume.\n

\n
\n\n \n \n
\n £1,400\n per month, billed annually\n
\n

\n Includes 2 million queries a month. Beyond that it is £0.0004 per query, capped by your own budgets.\n

\n\n \n\n \n\n

Included

\n
    \n {included.map((item) => (\n
  • \n \n {item}\n
    • \n ))}\n
\n\n \n\n

Not included

\n
    \n {excluded.map((item) => (\n
  • \n \n {item}\n
    • \n ))}\n
\n\n \n\n

\n Past roughly 20 million queries a month, or if any of the exclusions above are hard requirements, a\n conversation will get you a better answer than this page can.\n

\n \n \n \n
\n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/pricing/PricingSinglePlan.tsx" }, { "path": "packages/registry-react/blocks/pricing/PricingTierComparisonMatrix.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRight, Check, Minus, ShieldCheck } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\ntype BillingCycle = 'monthly' | 'annual'\n\ninterface Plan {\n id: string\n name: string\n description: string\n monthlyPrice: number\n annualPrice: number\n highlight: boolean\n badge?: string\n ctaText: string\n ctaVariant: 'default' | 'outline' | 'secondary'\n}\n\nconst plans: Plan[] = [\n {\n id: 'community',\n name: 'Community OSS',\n description: 'For indie hackers and developers building open source products.',\n monthlyPrice: 0,\n annualPrice: 0,\n highlight: false,\n ctaText: 'Start Building Free',\n ctaVariant: 'outline',\n },\n {\n id: 'pro',\n name: 'Pro Team',\n description: 'For growing startup engineering teams that require high velocity.',\n monthlyPrice: 29,\n annualPrice: 24,\n highlight: true,\n badge: 'Most Popular',\n ctaText: 'Claim Pro License',\n ctaVariant: 'default',\n },\n {\n id: 'enterprise',\n name: 'Enterprise Scale',\n description: 'Dedicated registry syncing, SSO, SOC2 compliance audits, and SLA.',\n monthlyPrice: 119,\n annualPrice: 99,\n highlight: false,\n ctaText: 'Talk to Sales',\n ctaVariant: 'outline',\n },\n]\n\ninterface FeatureComparisonRow {\n category: string\n features: {\n name: string\n tooltip: string\n community: boolean | string\n pro: boolean | string\n enterprise: boolean | string\n }[]\n}\n\nconst comparisonData: FeatureComparisonRow[] = [\n {\n category: 'Registry & Core Primitives',\n features: [\n {\n name: 'Full AST Component Source Access',\n tooltip: 'Raw SFC and TSX source files copied directly into your repository.',\n community: true,\n pro: true,\n enterprise: true,\n },\n {\n name: 'Dual-Framework Parity (Vue + React)',\n tooltip: 'Identical DOM semantics and CVA tokens across both ecosystems.',\n community: true,\n pro: true,\n enterprise: true,\n },\n {\n name: 'Curated Marketing & SaaS Blocks',\n tooltip: 'Access to 450+ production-grade unbundled layout blocks.',\n community: '100+ Blocks',\n pro: 'All 450+ Blocks',\n enterprise: 'All Blocks + Custom',\n },\n {\n name: 'Tailwind CSS v4 OKLCH Token System',\n tooltip: 'Hardware-calibrated color spaces and spring curves.',\n community: true,\n pro: true,\n enterprise: true,\n },\n ],\n },\n {\n category: 'Enterprise & Security Compliance',\n features: [\n {\n name: 'Private Registry Mirroring',\n tooltip: 'Host your organization’s customized internal registry behind a firewall.',\n community: false,\n pro: '1 Private Repo',\n enterprise: 'Unlimited Private Hubs',\n },\n {\n name: 'SOC2 & ISO 27001 Audit Packs',\n tooltip: 'Pre-certified security documentation and architecture proofs.',\n community: false,\n pro: false,\n enterprise: true,\n },\n {\n name: 'Guaranteed 99.99% Registry CDN SLA',\n tooltip: 'Global multi-region edge distribution uptime guarantee.',\n community: false,\n pro: '99.9% SLA',\n enterprise: '99.99% High Availability',\n },\n {\n name: 'Dedicated Design Engineering Support',\n tooltip: 'Direct Slack / Discord channel with core design system maintainers.',\n community: false,\n pro: 'Priority Email',\n enterprise: 'Dedicated Slack Channel',\n },\n ],\n },\n]\n\nexport interface PricingTierComparisonMatrixProps {\n className?: string\n}\n\nexport function PricingTierComparisonMatrix({ className }: PricingTierComparisonMatrixProps) {\n const [billing, setBilling] = React.useState('annual')\n\n return (\n \n
\n {/* Header */}\n
\n \n \n Predictable Pricing\n \n

\n Zero seat taxes. Own your source code forever.\n

\n

\n Choose the tier that fits your engineering team's delivery scale and compliance needs.\n

\n\n {/* Billing Toggle */}\n
\n \n Monthly\n \n
\n setBilling('monthly')}\n >\n Monthly\n \n setBilling('annual')}\n >\n Annual\n Save 20%\n \n
\n
\n
\n\n {/* Pricing Plan Cards Grid (3 Columns) */}\n
\n {plans.map((plan) => (\n \n {/* Top Badge */}\n {plan.badge && (\n
\n \n {plan.badge}\n \n
\n )}\n\n
\n
\n

{plan.name}

\n

{plan.description}

\n
\n\n {/* Price display */}\n
\n \n ${billing === 'annual' ? plan.annualPrice : plan.monthlyPrice}\n \n / month\n
\n

\n {billing === 'annual' && plan.annualPrice > 0\n ? `Billed annually ($${plan.annualPrice * 12}/yr)`\n : 'Billed monthly'}\n

\n
\n\n \n \n ))}\n
\n\n {/* Deep Feature Comparison Matrix Table */}\n
\n
\n

Detailed Feature Comparison

\n

Full granular matrix of capabilities and entitlements.

\n
\n\n \n
\n \n \n \n \n \n \n \n \n \n \n {comparisonData.map((section, sIdx) => (\n \n \n \n {section.category}\n \n \n {section.features.map((row, rIdx) => (\n \n \n \n \n \n \n ))}\n \n ))}\n \n
CapabilityCommunityPro TeamEnterprise
\n
{row.name}
\n
{row.tooltip}
\n 		\n {typeof row.community === 'boolean' ? (\n row.community ? (\n \n ) : (\n \n )\n ) : (\n {row.community}\n )}\n \n {typeof row.pro === 'boolean' ? (\n row.pro ? (\n \n ) : (\n \n )\n ) : (\n {row.pro}\n )}\n \n {typeof row.enterprise === 'boolean' ? (\n row.enterprise ? (\n \n ) : (\n \n )\n ) : (\n {row.enterprise}\n )}\n
\n
\n \n
\n
\n \n )\n}\nexport default PricingTierComparisonMatrix\n", "type": "registry:block", "target": "~/components/blocks/pricing/PricingTierComparisonMatrix.tsx" }, { "path": "packages/registry-react/blocks/pricing/PricingUsageCalculatorSlider.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRight, Calculator, Globe, Server, Users } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface PricingUsageCalculatorSliderProps {\n className?: string\n}\n\nexport function PricingUsageCalculatorSlider({ className }: PricingUsageCalculatorSliderProps) {\n const [mau, setMau] = React.useState(100000)\n const [qps, setQps] = React.useState(500)\n const [edgeReplicas, setEdgeReplicas] = React.useState(3)\n\n const formatNumber = (num: number): string => {\n if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M'\n if (num >= 1000) return (num / 1000).toFixed(0) + 'k'\n return num.toString()\n }\n\n const applyPreset = (preset: 'seed' | 'growth' | 'scale') => {\n if (preset === 'seed') {\n setMau(25000)\n setQps(150)\n setEdgeReplicas(2)\n } else if (preset === 'growth') {\n setMau(350000)\n setQps(2500)\n setEdgeReplicas(5)\n } else {\n setMau(2500000)\n setQps(12000)\n setEdgeReplicas(10)\n }\n }\n\n const traditionalCost = React.useMemo(() => {\n const baseSeatFee = 350\n const perUserFee = (mau / 1000) * 1.8\n const qpsSurcharge = qps * 0.25\n return Math.round(baseSeatFee + perUserFee + qpsSurcharge)\n }, [mau, qps])\n\n const uipkgeCost = React.useMemo(() => {\n const rawBandwidth = (mau / 100000) * 4\n const flatProLicense = 24\n return Math.round(flatProLicense + rawBandwidth)\n }, [mau])\n\n const monthlySavings = Math.max(0, traditionalCost - uipkgeCost)\n const annualSavings = monthlySavings * 12\n\n return (\n \n
\n {/* Section Header */}\n
\n \n \n Interactive Infrastructure ROI Calculator\n \n

\n Calculate your annual savings with unbundled architecture.\n

\n

\n See how eliminating proprietary seat licenses and runtime SaaS wrappers cuts your front-end TCO.\n

\n\n {/* Presets Bar */}\n
\n \n \n \n
\n
\n\n {/* 2-Column Split: Sliders Workbench Left (7 Cols), Savings Scorecard Right (5 Cols) */}\n
\n {/* Sliders Controls (7 Cols) */}\n \n
\n
\n

Traffic & Telemetry Inputs

\n Dynamic Projection\n
\n\n {/* Slider 1: MAU */}\n
\n
\n \n Monthly Active Users (MAU)\n \n {formatNumber(mau)} users\n
\n setMau(Number(e.target.value))}\n className=\"accent-primary bg-border h-2 w-full cursor-pointer rounded-lg\"\n />\n
\n\n {/* Slider 2: QPS */}\n
\n
\n \n Peak Query Throughput\n \n {formatNumber(qps)} QPS\n
\n setQps(Number(e.target.value))}\n className=\"accent-primary bg-border h-2 w-full cursor-pointer rounded-lg\"\n />\n
\n\n {/* Slider 3: Global Replicas */}\n
\n
\n \n Global Edge POP Replicas\n \n {edgeReplicas} Edge Regions\n
\n setEdgeReplicas(Number(e.target.value))}\n className=\"accent-primary bg-border h-2 w-full cursor-pointer rounded-lg\"\n />\n
\n
\n\n
\n Formula: Direct AST + Raw Static Hosting\n ✓ Zero Seat Surcharges\n
\n \n\n {/* ROI Cost & Savings Projection Card (5 Cols) */}\n \n
\n \n Projected Annual Net Savings\n \n\n {/* Big Stat Display */}\n
\n
\n ${annualSavings.toLocaleString()}\n
\n

\n Saved every year (${monthlySavings.toLocaleString()}/month)\n

\n
\n\n {/* Comparative Cost Bars */}\n
\n
\n
\n Traditional Monolith Stack:\n ${traditionalCost.toLocaleString()}/mo\n
\n
\n
\n
\n
\n\n
\n
\n UIPKGE Unbundled Registry:\n ${uipkgeCost.toLocaleString()}/mo\n
\n
\n \n
\n
\n
\n
\n\n \n \n
\n
\n \n )\n}\nexport default PricingUsageCalculatorSlider\n", "type": "registry:block", "target": "~/components/blocks/pricing/PricingUsageCalculatorSlider.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", "https://uipkge.dev/r/react/table.json", "https://uipkge.dev/r/react/toggle-group.json" ], "description": "Pricing collection with eleven interchangeable variants: seat matrix, interactive calculator, enterprise SLA card, feature add-on builder, feature tier slider, grouped matrix, per-plan cards, sticky-header matrix, single plan, tier comparison matrix, and usage calculator slider.", "categories": [ "pricing", "marketing", "billing" ] }