{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "pricing-feature-tier-slider", "title": "Pricing Feature Tier Slider", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/pricing-feature-tier-slider/pricing-feature-tier-slider.component.ts", "content": "// Continuous MAU usage-scale pricing slider: stepped tier calculation with an annual\n// billing toggle and per-tier deliverables. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport { ArrowRight, CheckCircle2, LucideAngularModule, Sliders } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\n\nexport interface PricingTier {\n label: string\n mauCount: string\n basePriceMonthly: number\n tierName: string\n features: string[]\n}\n\nconst TIERS: PricingTier[] = [\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\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-pricing-feature-tier-slider, [ui-pricing-feature-tier-slider]',\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, UiCardContentComponent],\n template: `\n
\n
\n \n
\n \n \n Continuous Scale Synthesizer\n \n \n\n

\n {{ title() }}\n

\n\n

\n {{ description() }}\n

\n\n \n
\n Monthly\n \n \n \n \n Annual Billing\n \n Save 20%\n \n \n
\n
\n\n \n
\n
\n
\n \n
\n
\n Calculated Tier Plan\n

{{ currentTier().tierName }}

\n
\n Engineered for {{ currentTier().mauCount }} active user sessions\n
\n
\n\n \n
\n
\n ${{ effectivePrice() }}\n / month\n
\n @if (isAnnual()) {\n
\n Save ${{ annualSavings() }}/yr on annual\n
\n }\n
\n
\n\n \n
\n
\n Monthly Traffic Volume\n {{ currentTier().mauCount }} Users\n
\n\n \n\n \n
\n @for (t of tiers; track t.label) {\n \n {{ t.label }}\n \n }\n
\n
\n\n \n
\n Guaranteed Tier Deliverables\n
\n @for (feat of currentTier().features; track $index) {\n
\n \n {{ feat }}\n
\n }\n
\n
\n\n \n
\n \n
\n
\n
\n
\n
\n
\n `,\n})\nexport class UiPricingFeatureTierSliderComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Sliders = Sliders\n\n protected readonly tiers = TIERS\n\n @Input('title') set titleInput(v: string) {\n if (v !== undefined) this.titleSignal.set(v)\n }\n @Input('description') set descriptionInput(v: string) {\n if (v !== undefined) this.descriptionSignal.set(v)\n }\n @Input('class') className?: string\n\n private readonly titleSignal = signal('Predictable usage pricing with dynamic linear scale.')\n private readonly descriptionSignal = signal(\n 'Slide to your estimated monthly active users or edge invocations to calculate your exact monthly investment.',\n )\n\n readonly title = computed(() => this.titleSignal())\n readonly description = computed(() => this.descriptionSignal())\n\n readonly sliderIndex = signal(2)\n readonly isAnnual = signal(true)\n\n readonly currentTier = computed(() => TIERS[this.sliderIndex()] ?? TIERS[2]!)\n\n readonly effectivePrice = computed(() => {\n const base = this.currentTier().basePriceMonthly\n return this.isAnnual() ? Math.round(base * 0.8) : base\n })\n\n readonly annualSavings = computed(() => (this.currentTier().basePriceMonthly - this.effectivePrice()) * 12)\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden py-16 sm:py-24', this.className)\n }\n\n cadenceLabelClass(active: boolean): string {\n return cn('text-xs font-medium', active ? 'text-foreground font-semibold' : 'text-muted-foreground')\n }\n\n cadenceAnnualLabelClass(): string {\n return cn(\n 'flex items-center gap-1.5 text-xs font-medium',\n this.isAnnual() ? 'text-foreground font-semibold' : 'text-muted-foreground',\n )\n }\n\n cadenceTrackClass(): string {\n return cn(\n 'focus-visible:ring-ring relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus-visible:ring-2 focus-visible:outline-none',\n this.isAnnual() ? 'bg-primary' : 'bg-muted',\n )\n }\n\n cadenceThumbClass(): string {\n return cn(\n 'bg-background pointer-events-none inline-block size-5 transform rounded-full shadow-lg ring-0 transition duration-200 ease-in-out',\n this.isAnnual() ? 'translate-x-5' : 'translate-x-0',\n )\n }\n\n stepLabelClass(label: string): string {\n return cn(\n 'hover:text-foreground cursor-pointer transition-colors',\n this.currentTier().label === label ? 'text-primary font-bold' : '',\n )\n }\n\n setTierByLabel(label: string): void {\n const idx = TIERS.findIndex((t) => t.label === label)\n if (idx >= 0) this.sliderIndex.set(idx)\n }\n\n onSliderInput(event: Event): void {\n const value = Number((event.target as HTMLInputElement).value)\n if (Number.isInteger(value) && value >= 0 && value < TIERS.length) this.sliderIndex.set(value)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/pricing-feature-tier-slider/pricing-feature-tier-slider.component.ts" }, { "path": "packages/registry-angular/blocks/pricing-feature-tier-slider/index.ts", "content": "export { UiPricingFeatureTierSliderComponent, type PricingTier } from './pricing-feature-tier-slider.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/pricing-feature-tier-slider/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": "Continuous MAU and usage scale pricing slider with dynamic tier calculation and annual discount toggle.", "categories": [ "pricing", "marketing" ] }