Pricing

blockpricing

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.

Installation

$pnpm dlx uipkge-ng@latest add pricing

$npx uipkge-ng@latest add pricing

$yarn dlx uipkge-ng@latest add pricing

$bunx uipkge-ng@latest add pricing

Manifest:https://uipkge.dev/r/angular/pricing.jsonInstalls to:src/app/components/blocks/pricing/

Variants

Loading interactive previews…

npm dependencies

lucide-angular

Includes

badge button card pricing-01 pricing-calculator pricing-enterprise-sla-card pricing-feature-addon-builder pricing-feature-tier-slider pricing-matrix-grouped pricing-matrix-plan-cards pricing-matrix-sticky-header pricing-single-plan pricing-tier-comparison-matrix

Files installed (3)

src/app/components/blocks/pricing/pricing.component.ts4.1 kB

// Pricing collection shell: the flagship seat matrix (pricing-01) plus the ten
// sibling variant blocks, composed into the one install unit that mirrors the
// 11-file Vue `pricing` registry item. Use `variant` to render a single variant;
// the default stacks the full collection like the React demo page.
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
import { UiPricing01Component } from '../pricing-01/pricing-01.component'
import { UiPricingCalculatorComponent } from '../pricing-calculator/pricing-calculator.component'
import { UiPricingEnterpriseSlaCardComponent } from '../pricing-enterprise-sla-card/pricing-enterprise-sla-card.component'
import { UiPricingFeatureAddonBuilderComponent } from '../pricing-feature-addon-builder/pricing-feature-addon-builder.component'
import { UiPricingFeatureTierSliderComponent } from '../pricing-feature-tier-slider/pricing-feature-tier-slider.component'
import { UiPricingMatrixGroupedComponent } from '../pricing-matrix-grouped/pricing-matrix-grouped.component'
import { UiPricingMatrixPlanCardsComponent } from '../pricing-matrix-plan-cards/pricing-matrix-plan-cards.component'
import { UiPricingMatrixStickyHeaderComponent } from '../pricing-matrix-sticky-header/pricing-matrix-sticky-header.component'
import { UiPricingSinglePlanComponent } from '../pricing-single-plan/pricing-single-plan.component'
import { UiPricingTierComparisonMatrixComponent } from '../pricing-tier-comparison-matrix/pricing-tier-comparison-matrix.component'
import { UiPricingUsageCalculatorSliderComponent } from './pricing-usage-calculator-slider.component'

export type PricingVariant =
  | 'all'
  | 'pricing-01'
  | 'calculator'
  | 'enterprise-sla'
  | 'addon-builder'
  | 'tier-slider'
  | 'matrix-grouped'
  | 'matrix-plan-cards'
  | 'matrix-sticky-header'
  | 'single-plan'
  | 'tier-comparison'
  | 'usage-calculator'

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-pricing, [ui-pricing]',
  standalone: true,
  host: { '[attr.class]': '"contents"' },
  imports: [
    UiPricing01Component,
    UiPricingCalculatorComponent,
    UiPricingEnterpriseSlaCardComponent,
    UiPricingFeatureAddonBuilderComponent,
    UiPricingFeatureTierSliderComponent,
    UiPricingMatrixGroupedComponent,
    UiPricingMatrixPlanCardsComponent,
    UiPricingMatrixStickyHeaderComponent,
    UiPricingSinglePlanComponent,
    UiPricingTierComparisonMatrixComponent,
    UiPricingUsageCalculatorSliderComponent,
  ],
  template: `
    <div data-slot="pricing" class="w-full space-y-16">
      @switch (variant) {
        @case ('pricing-01') {
          <ui-pricing-01 />
        }
        @case ('calculator') {
          <ui-pricing-calculator />
        }
        @case ('enterprise-sla') {
          <ui-pricing-enterprise-sla-card />
        }
        @case ('addon-builder') {
          <ui-pricing-feature-addon-builder />
        }
        @case ('tier-slider') {
          <ui-pricing-feature-tier-slider />
        }
        @case ('matrix-grouped') {
          <ui-pricing-matrix-grouped />
        }
        @case ('matrix-plan-cards') {
          <ui-pricing-matrix-plan-cards />
        }
        @case ('matrix-sticky-header') {
          <ui-pricing-matrix-sticky-header />
        }
        @case ('single-plan') {
          <ui-pricing-single-plan />
        }
        @case ('tier-comparison') {
          <ui-pricing-tier-comparison-matrix />
        }
        @case ('usage-calculator') {
          <ui-pricing-usage-calculator-slider />
        }
        @default {
          <ui-pricing-01 />
          <ui-pricing-calculator />
          <ui-pricing-enterprise-sla-card />
          <ui-pricing-feature-addon-builder />
          <ui-pricing-feature-tier-slider />
          <ui-pricing-matrix-grouped />
          <ui-pricing-matrix-plan-cards />
          <ui-pricing-matrix-sticky-header />
          <ui-pricing-single-plan />
          <ui-pricing-tier-comparison-matrix />
          <ui-pricing-usage-calculator-slider />
        }
      }
    </div>
  `,
})
export class UiPricingComponent {
  /** Single variant to render, or 'all' for the full stacked collection. */
  @Input() variant: PricingVariant = 'all'
}

src/app/components/blocks/pricing/pricing-usage-calculator-slider.component.ts10.1 kB

src/app/components/blocks/pricing/index.ts0.2 kB

Raw manifest:https://uipkge.dev/r/angular/pricing.json

Change language