{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "pricing-tier-comparison-matrix", "title": "Pricing Tier Comparison Matrix", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/pricing-tier-comparison-matrix/pricing-tier-comparison-matrix.component.ts", "content": "// Comprehensive pricing tier comparison matrix with billing cycle discount toggles,\n// prominent recommended plan, and granular capability matrix table.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { ArrowRight, Check, LucideAngularModule, Minus, ShieldCheck } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent } from '@/ui/card/card.component'\nimport type { ButtonVariant } from '@/ui/button/button.component'\n\nexport type BillingCycle = 'monthly' | 'annual'\n\nexport interface PricingTierPlan {\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: ButtonVariant\n}\n\nconst plans: PricingTierPlan[] = [\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\nexport interface TierFeatureCell {\n name: string\n tooltip: string\n community: boolean | string\n pro: boolean | string\n enterprise: boolean | string\n}\n\nexport interface TierComparisonSection {\n category: string\n features: TierFeatureCell[]\n}\n\nconst comparisonData: TierComparisonSection[] = [\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\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-pricing-tier-comparison-matrix, [ui-pricing-tier-comparison-matrix]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent],\n template: `\n
\n
\n \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 \n
\n Monthly\n
\n \n \n
\n
\n
\n\n \n
\n @for (plan of plans; track plan.id) {\n
\n \n @if (plan.badge) {\n
\n \n {{ plan.badge }}\n \n
\n }\n\n
\n
\n

{{ plan.name }}

\n

{{ plan.description }}

\n
\n\n \n
\n {{ priceLabel(plan) }}\n / month\n
\n

{{ billedNote(plan) }}

\n
\n\n \n
\n }\n
\n\n \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 @for (section of comparisonData; track section.category) {\n \n \n {{ section.category }}\n \n \n @for (row of section.features; track row.name) {\n \n \n \n \n \n \n }\n }\n \n
CapabilityCommunityPro TeamEnterprise
\n
{{ row.name }}
\n
{{ row.tooltip }}
\n 		\n @if (row.community === true) {\n \n } @else if (row.community === false) {\n \n } @else {\n {{ row.community }}\n }\n \n @if (row.pro === true) {\n \n } @else if (row.pro === false) {\n \n } @else {\n {{ row.pro }}\n }\n \n @if (row.enterprise === true) {\n \n } @else if (row.enterprise === false) {\n \n } @else {\n {{ row.enterprise }}\n }\n
\n
\n
\n
\n
\n
\n `,\n})\nexport class UiPricingTierComparisonMatrixComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Check = Check\n protected readonly Minus = Minus\n protected readonly ShieldCheck = ShieldCheck\n\n readonly plans = plans\n readonly comparisonData = comparisonData\n\n @Input() set defaultBilling(v: BillingCycle | undefined) {\n if (v) this.billing.set(v)\n }\n @Input('class') className?: string\n\n readonly billing = signal('annual')\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', this.className)\n }\n\n cycleLabelClass(cycle: BillingCycle): string {\n return cn(this.billing() === cycle ? 'text-foreground font-bold' : 'text-muted-foreground')\n }\n\n toggleButtonClass(cycle: BillingCycle): string {\n return cn(\n 'relative z-10 rounded-full px-3 py-1 font-mono text-xs transition-colors',\n cycle === 'annual' && 'flex items-center gap-1.5',\n this.billing() === cycle ? 'bg-primary text-primary-foreground font-semibold shadow-xs' : 'text-muted-foreground',\n )\n }\n\n planCardClass(plan: PricingTierPlan): string {\n return cn(\n 'border-border bg-card relative flex flex-col justify-between space-y-6 rounded-2xl p-6 text-left shadow-xl transition-colors sm:p-8',\n plan.highlight ? 'border-primary/80 ring-primary/20 scale-[1.02] shadow-sm ring-2' : 'hover:border-border/80',\n )\n }\n\n billedNote(plan: PricingTierPlan): string {\n if (this.billing() === 'annual' && plan.annualPrice > 0) return `Billed annually ($${plan.annualPrice * 12}/yr)`\n return 'Billed monthly'\n }\n\n priceLabel(plan: PricingTierPlan): string {\n return `$${this.billing() === 'annual' ? plan.annualPrice : plan.monthlyPrice}`\n }\n\n setBilling(cycle: BillingCycle): void {\n this.billing.set(cycle)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/pricing-tier-comparison-matrix/pricing-tier-comparison-matrix.component.ts" }, { "path": "packages/registry-angular/blocks/pricing-tier-comparison-matrix/index.ts", "content": "export {\n UiPricingTierComparisonMatrixComponent,\n type BillingCycle,\n type PricingTierPlan,\n type TierComparisonSection,\n type TierFeatureCell,\n} from './pricing-tier-comparison-matrix.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/pricing-tier-comparison-matrix/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json" ], "description": "Comprehensive pricing tier comparison matrix with billing cycle discount toggles, prominent recommended plan, and granular capability matrix table.", "categories": [ "marketing" ], "deprecated": true, "replacedBy": "pricing" }