{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "pricing", "title": "Pricing", "type": "registry:block", "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" ], "files": [ { "path": "packages/elements-lit/src/blocks/pricing/pricing.ts", "content": "import { LitElement, css, html, nothing } from 'lit'\nimport { ArrowRight, Check, ChevronDown, ChevronUp, ShieldCheck, Users, Zap } from 'lucide'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/badge/badge'\nimport '../../components/button/button'\nimport '../../components/card/card'\nimport '../../components/separator/separator'\nimport '../../components/slider/slider'\nimport '../../components/switch/switch'\nimport '../../components/toggle-group/toggle-group'\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\n/**\n * — the registry Pricing block (Pricing01 variant) as a web component.\n *\n * Class strings, tiers, and matrix data are React's Pricing01 verbatim. React\n * state becomes { state: true } fields. Like React, the block takes no props\n * and fires no events; billing cycle, currency, seat simulator, add-ons, and\n * the comparison matrix toggle are internal.\n *\n * Only the primary Pricing01 variant is ported: the registry's ten other\n * pricing variants (calculators, SLA card, add-on builder, tier sliders,\n * matrix variants, single plan) ship as their own follow-up block(s).\n * The comparison matrix uses a native with the registry Table part\n * classes copied verbatim — 's data-driven API can't express the\n * spanning group rows or per-column highlight.\n */\nexport class UipPricing extends LitElement {\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n // :host display can't be a utility class (the host has no template of its own).\n static styles = [tailwind, css`:host { display: block; }`]\n\n static properties = {\n billingCycle: { state: true },\n currency: { state: true },\n teamSeats: { state: true },\n addDedicatedSla: { state: true },\n addAuditVault: { state: true },\n showComparisonTable: { state: true },\n }\n\n private billingCycle: BillingCycle = 'yearly'\n private currency: Currency = 'USD'\n private teamSeats: number[] = [12]\n private addDedicatedSla = false\n private addAuditVault = false\n private showComparisonTable = false\n\n constructor() {\n super()\n new ThemeController(this)\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.setAttribute('data-uipkge', '')\n this.setAttribute('data-slot', 'pricing-01')\n }\n\n render() {\n const rates = currencyRates[this.currency]\n const sym = currencySymbols[this.currency]\n const starterBase = this.billingCycle === 'yearly' ? 12 : 15\n const teamBase = this.billingCycle === 'yearly' ? 28 : 35\n const enterpriseBase = this.billingCycle === 'yearly' ? 68 : 85\n const slaCost = this.addDedicatedSla ? 99 : 0\n const vaultCost = this.addAuditVault ? 49 : 0\n const currentSeats = this.teamSeats[0] || 1\n const starterMonthlyTotal = Math.round((starterBase * currentSeats + (this.addAuditVault ? 29 : 0)) * rates)\n const teamMonthlyTotal = Math.round((teamBase * currentSeats + slaCost + vaultCost) * rates)\n const annualSavingsTeam = Math.round((35 * currentSeats * 12 - 28 * currentSeats * 12) * rates)\n\n return html`\n
\n
\n
\n
\n ${icon(ShieldCheck, 'shield-check', 'size-3.5')}\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
\n
\n ) => {\n if (e.detail.value) this.billingCycle = e.detail.value as BillingCycle\n }}\n >\n Monthly\n \n Annual\n \n Save 20%\n \n \n \n
\n\n
\n ) => {\n if (e.detail.value) this.currency = e.detail.value as Currency\n }}\n >\n USD ($)\n EUR (€)\n GBP (£)\n \n
\n
\n\n
\n
\n
\n ${icon(Users, 'users', 'text-primary size-4')}\n Simulate Team Size:\n
\n
\n \n ${currentSeats} ${currentSeats === 1 ? 'seat' : 'seats'}\n \n ${this.billingCycle === 'yearly' && annualSavingsTeam > 0\n ? html`\n (Saves ~${sym}${annualSavingsTeam.toLocaleString()}/yr on Team plan)\n `\n : nothing}\n
\n
\n
\n ) => {\n this.teamSeats = e.detail\n }}\n >\n
\n
\n 1 seat\n 25 seats\n 50+ seats\n
\n
\n
\n\n
\n \n
\n \n
\n Bootstrap & Indie\n
\n Starter Studio\n \n For agile squads and early-stage product teams validating core workflows.\n \n
\n
\n ${sym}${Math.round(starterBase * rates)}\n / seat / month\n
\n
\n Est. ${sym}${starterMonthlyTotal.toLocaleString()}/mo for ${currentSeats}\n ${currentSeats === 1 ? 'seat' : 'seats'}\n
\n
\n \n \n \n
\n

Included features

\n
    \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n Up to 10 team seats & unlimited guests\n
    • \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n 100,000 monthly API event calls\n
    • \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n 30-day continuous audit & revision history\n
    • \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n Standard Community & Email support (24h)\n
    • \n
  • \n ${icon(Check, 'check', 'text-muted-foreground/50 mt-0.5 size-4 shrink-0')}\n Community Discord access & quickstarts\n
    • \n
\n
\n \n
\n \n \n Start Free 14-Day Trial\n ${icon(ArrowRight, 'arrow-right', 'size-3.5')}\n \n \n \n\n \n
\n \n ${icon(Zap, 'zap', 'size-3 fill-current')}\n Most Popular Choice\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 ${sym}${Math.round(teamBase * rates)}\n / seat / month\n
\n
\n Est. ${sym}${teamMonthlyTotal.toLocaleString()}/mo for ${currentSeats}\n ${currentSeats === 1 ? 'seat' : 'seats'}\n
\n
\n \n \n \n
\n

Everything in Starter, plus

\n
    \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n Unlimited team seats & custom workspace roles\n
    • \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n 2.5M monthly API calls & priority queue\n
    • \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n Google & Okta SAML SSO integration\n
    • \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n 365-day immutable compliance logs\n
    • \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n Priority ticketing with 4h guaranteed SLA\n
    • \n
\n
\n
\n

Optional Power Add-ons

\n
\n \n ) => {\n this.addDedicatedSla = e.detail\n }}\n >\n
\n
\n \n ) => {\n this.addAuditVault = e.detail\n }}\n >\n
\n
\n \n
\n \n \n Deploy Team Workspace\n ${icon(ArrowRight, 'arrow-right', 'size-3.5')}\n \n \n \n\n \n
\n \n
\n Enterprise & Security\n
\n Enterprise Suite\n \n Dedicated infrastructure, custom security controls, and bespoke compliance SLAs.\n \n
\n
\n ${sym}${Math.round(enterpriseBase * rates)}\n / seat / month\n
\n
Custom volume licensing available for 100+ seats
\n
\n \n \n \n
\n

Everything in Team, plus

\n
    \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n Custom SCIM v2 user provisioning & directory sync\n
    • \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n Dedicated VPC peering & custom data residency\n
    • \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n 99.99% uptime SLA with financial penalty backing\n
    • \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n Assigned Principal Solutions Engineer & private Slack\n
    • \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n Custom Master Service Agreement (MSA) & DPA\n
    • \n
\n
\n \n
\n \n \n ${icon(ShieldCheck, 'shield-check', 'text-primary size-3.5')}\n Contact Solutions Team\n \n \n \n
\n\n
\n {\n this.showComparisonTable = !this.showComparisonTable\n }}\n >\n ${this.showComparisonTable ? 'Hide Detailed Feature Comparison' : 'Compare All Features & Enterprise Limits'}\n ${this.showComparisonTable ? icon(ChevronUp, 'chevron-up', 'size-4') : icon(ChevronDown, 'chevron-down', 'size-4')}\n \n
\n\n ${this.showComparisonTable\n ? html`
\n
\n
\n

Detailed Specification & Limits

\n

Comprehensive side-by-side breakdown across every tier.

\n
\n All plans include SSL & automated backups\n
\n
\n
\n
\n \n \n \n Capabilities\n \n \n Starter Studio\n \n \n Team Scale\n \n \n Enterprise Suite\n \n \n \n \n ${comparisonMatrix.map(\n (group) => html`\n \n \n ${group.category}\n \n \n ${group.features.map(\n (feat) => html`\n \n ${feat.name}\n \n \n ${feat.starter}\n \n \n ${feat.team}\n \n \n ${feat.enterprise}\n \n `,\n )}\n `,\n )}\n \n
\n \n \n `\n : nothing}\n \n \n `\n }\n}\n\ncustomElements.get('uip-pricing') || customElements.define('uip-pricing', UipPricing)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'uip-pricing': UipPricing\n }\n}\n", "type": "registry:file", "target": "src/uip/blocks/pricing/pricing.ts" } ], "dependencies": [ "lit", "lucide" ], "registryDependencies": [ "https://uipkge.dev/r/lit/badge.json", "https://uipkge.dev/r/lit/button.json", "https://uipkge.dev/r/lit/card.json", "https://uipkge.dev/r/lit/lit-core.json", "https://uipkge.dev/r/lit/separator.json", "https://uipkge.dev/r/lit/slider.json", "https://uipkge.dev/r/lit/switch.json", "https://uipkge.dev/r/lit/toggle-group.json" ] }