UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Feature Metric Growth Stepper

blockfeature
Boilerplate repo

Interactive scale progression workbench showing infrastructure capacity from Seed to Global Enterprise.

Installation

$npx uipkge-ng@latest add feature-metric-growth-stepper
Manifest:https://uipkge.dev/r/angular/feature-metric-growth-stepper.jsonInstalls to:src/app/components/blocks/feature-metric-growth-stepper/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

GrowthStage
interface GrowthStage {
  id: string
  name: string
  stageLabel: string
  mrrRange: string
  description: string
  users: string
  qps: string
  nodes: number
  sla: string
  features: string[]
}

npm dependencies

lucide-angular

Files installed (2)

  • src/app/components/blocks/feature-metric-growth-stepper/feature-metric-growth-stepper.component.ts12.5 kB
    // Scale progression workbench: a milestone stepper bar across growth stages plus an
// active-stage deep dive (architecture capacity checklist + infrastructure telemetry).
// Port of the React block 1:1.
import { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'
import {
  Activity,
  ArrowRight,
  CheckCircle2,
  Cpu,
  Globe,
  LucideAngularModule,
  ShieldCheck,
  TrendingUp,
  Zap,
} from 'lucide-angular'
import { cn } from '@/lib/utils'
import { UiBadgeComponent } from '@/ui/badge/badge.component'
import { UiButtonComponent } from '@/ui/button/button.component'
import { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'

export interface GrowthStage {
  id: string
  name: string
  stageLabel: string
  mrrRange: string
  description: string
  users: string
  qps: string
  nodes: number
  sla: string
  features: string[]
}

const DEFAULT_STAGES: GrowthStage[] = [
  {
    id: 'seed',
    name: 'Seed & Validation',
    stageLabel: 'Stage 01',
    mrrRange: '$0 – $10k / mo',
    description:
      'Instant zero-dependency UI primitives copied directly into your repository. Zero lock-in, zero build overhead.',
    users: '1k – 25k MAU',
    qps: '500 req/s',
    nodes: 3,
    sla: '99.9% Best Effort',
    features: [
      'Unbundled component source ownership',
      'Tailwind v4 theme variables',
      'Single-command CLI installation',
    ],
  },
  {
    id: 'series-a',
    name: 'Series A Product-Market Fit',
    stageLabel: 'Stage 02',
    mrrRange: '$10k – $100k / mo',
    description: 'Scale complex dashboards and interactive blocks with full Reka UI/Radix headless accessibility.',
    users: '25k – 250k MAU',
    qps: '4,500 req/s',
    nodes: 12,
    sla: '99.95% Standard SLA',
    features: [
      'Complex KPI grids & interactive charts',
      'RBAC permission workspace switchers',
      'Dual-framework Astro preview integration',
    ],
  },
  {
    id: 'scale',
    name: 'Hypergrowth Expansion',
    stageLabel: 'Stage 03',
    mrrRange: '$100k – $1M / mo',
    description:
      'High-throughput global edge deployment with sub-millisecond component compilation and dedicated design system sync.',
    users: '250k – 2.5M MAU',
    qps: '35,000 req/s',
    nodes: 48,
    sla: '99.99% High Availability',
    features: [
      'Global edge caching mesh',
      'Automated cross-framework AST parity tests',
      'Custom token preset distribution',
    ],
  },
  {
    id: 'enterprise',
    name: 'Global Enterprise Scale',
    stageLabel: 'Stage 04',
    mrrRange: '$1M+ / mo',
    description:
      'Mission-critical resilience with multi-region failover, custom compliance SLAs, and dedicated design engineering support.',
    users: '10M+ MAU',
    qps: '250,000 req/s',
    nodes: 310,
    sla: '99.999% Fault Tolerant',
    features: [
      'SOC2 & HIPAA compliant architecture',
      'Sub-10ms global TTFB guarantees',
      '24/7 dedicated incident commander',
    ],
  },
]

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-feature-metric-growth-stepper, [ui-feature-metric-growth-stepper]',
  standalone: true,
  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.
  host: { '[attr.class]': '"contents"' },
  imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent, UiCardContentComponent],
  template: `
    <section data-slot="feature-metric-growth-stepper" [class]="rootClass">
      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="mx-auto max-w-3xl space-y-4 text-center">
          <a
            href="#growth-scale"
            class="group border-border/80 bg-secondary/60 hover:bg-secondary text-foreground inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium shadow-2xs transition-colors"
          >
            <lucide-icon [img]="TrendingUp" class="text-primary size-3.5" />
            <span>Scale-Ready Architecture Stepper</span>
            <lucide-icon
              [img]="ArrowRight"
              class="text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5"
            />
          </a>

          <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
            {{ title }}
          </h2>

          <p class="text-muted-foreground text-base sm:text-lg">
            {{ description }}
          </p>
        </div>

        <!-- Stepper Milestone Bar -->
        <div class="mt-12">
          <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
            @for (stage of activeStages(); track stage.id) {
              <button type="button" [class]="stepperButtonClass(stage.id)" (click)="selectedStageId.set(stage.id)">
                <div class="flex w-full items-center justify-between">
                  <span class="text-muted-foreground font-mono text-xs font-semibold tracking-wider uppercase">
                    {{ stage.stageLabel }}
                  </span>
                  <span
                    [class]="
                      cn(
                        'size-2 rounded-full transition-colors',
                        selectedStageId() === stage.id ? 'bg-primary animate-pulse' : 'bg-muted-foreground/30'
                      )
                    "
                  ></span>
                </div>

                <div class="text-foreground mt-2 text-sm font-bold">{{ stage.name }}</div>
                <div class="text-muted-foreground mt-1 font-mono text-xs">{{ stage.mrrRange }}</div>
              </button>
            }
          </div>
        </div>

        <!-- Active Stage Deep-Dive Workbench -->
        <div class="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-12">
          <!-- Left: Stage Description & Architecture Capabilities (7 Cols) -->
          <div ui-card class="border-border bg-card shadow-xs lg:col-span-7">
            <div ui-card-content class="space-y-6 p-6">
              <div class="border-border flex items-center justify-between border-b pb-4">
                <div class="space-y-0.5">
                  <span
                    ui-badge
                    variant="outline"
                    class="text-primary border-primary/30 bg-primary/10 font-mono text-xs"
                  >
                    {{ currentStage().stageLabel }} &bull; {{ currentStage().name }}
                  </span>
                  <div class="text-foreground pt-1 text-xl font-bold tracking-tight">Architecture Capacity</div>
                </div>
                <div class="text-right">
                  <div class="text-muted-foreground text-xs">Target Growth Band</div>
                  <div class="text-foreground font-mono text-sm font-bold">{{ currentStage().mrrRange }}</div>
                </div>
              </div>

              <p class="text-muted-foreground text-sm leading-relaxed">
                {{ currentStage().description }}
              </p>

              <!-- Technical Checklist -->
              <div class="space-y-2.5">
                <div class="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
                  Verified Infrastructure Benchmarks
                </div>
                <div class="grid grid-cols-1 gap-2">
                  @for (feature of currentStage().features; track feature) {
                    <div
                      class="border-border/80 bg-muted/20 text-foreground flex items-center gap-2.5 rounded-lg border p-2.5 text-xs"
                    >
                      <lucide-icon [img]="CheckCircle2" class="text-success size-4 shrink-0" />
                      <span>{{ feature }}</span>
                    </div>
                  }
                </div>
              </div>
            </div>
          </div>

          <!-- Right: Infrastructure Load Telemetry (5 Cols) -->
          <div ui-card class="border-border bg-card flex flex-col justify-between shadow-xs lg:col-span-5">
            <div ui-card-content class="space-y-6 p-6">
              <div class="border-border flex items-center justify-between border-b pb-3">
                <div class="flex items-center gap-2">
                  <lucide-icon [img]="Cpu" class="text-primary size-4" />
                  <span class="text-foreground text-sm font-semibold">Infrastructure Profile</span>
                </div>
                <span ui-badge variant="outline" class="border-border text-success font-mono text-xs">
                  {{ currentStage().sla }}
                </span>
              </div>

              <!-- Telemetry Metrics Grid -->
              <div class="grid grid-cols-2 gap-3">
                <div class="border-border bg-background space-y-1 rounded-lg border p-3">
                  <div class="text-muted-foreground flex items-center gap-1 text-xs">
                    <lucide-icon [img]="Activity" class="text-success size-3" />
                    <span>Monthly Active Users</span>
                  </div>
                  <div class="text-foreground font-mono text-base font-bold">{{ currentStage().users }}</div>
                </div>

                <div class="border-border bg-background space-y-1 rounded-lg border p-3">
                  <div class="text-muted-foreground flex items-center gap-1 text-xs">
                    <lucide-icon [img]="Zap" class="text-primary size-3" />
                    <span>Throughput (QPS)</span>
                  </div>
                  <div class="text-foreground font-mono text-base font-bold">{{ currentStage().qps }}</div>
                </div>

                <div class="border-border bg-background space-y-1 rounded-lg border p-3">
                  <div class="text-muted-foreground flex items-center gap-1 text-xs">
                    <lucide-icon [img]="Globe" class="text-info size-3" />
                    <span>Edge PoP Nodes</span>
                  </div>
                  <div class="text-foreground font-mono text-base font-bold">{{ currentStage().nodes }} PoPs</div>
                </div>

                <div class="border-border bg-background space-y-1 rounded-lg border p-3">
                  <div class="text-muted-foreground flex items-center gap-1 text-xs">
                    <lucide-icon [img]="ShieldCheck" class="text-success size-3" />
                    <span>Uptime Guarantee</span>
                  </div>
                  <div class="text-foreground font-mono text-base font-bold">
                    {{ currentStage().sla.split(' ')[0] }}
                  </div>
                </div>
              </div>

              <button ui-button class="w-full gap-2 shadow-xs" variant="outline">
                <span>View Infrastructure Blueprint</span>
                <lucide-icon [img]="ArrowRight" class="size-3.5" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  `,
})
export class UiFeatureMetricGrowthStepperComponent {
  protected readonly cn = cn
  protected readonly Activity = Activity
  protected readonly ArrowRight = ArrowRight
  protected readonly CheckCircle2 = CheckCircle2
  protected readonly Cpu = Cpu
  protected readonly Globe = Globe
  protected readonly ShieldCheck = ShieldCheck
  protected readonly TrendingUp = TrendingUp
  protected readonly Zap = Zap

  @Input() title = 'Scale your frontend architecture directly as your traffic expands.'
  @Input() description =
    'From single-developer seed prototypes to global multi-region enterprise platforms, unbundled components adapt to your infrastructure requirements.'
  @Input() set stages(v: GrowthStage[] | undefined) {
    this.customStages.set(v ? v.map((s) => ({ ...s, features: [...s.features] })) : undefined)
  }
  @Input('class') className?: string

  private readonly customStages = signal<GrowthStage[] | undefined>(undefined)

  readonly activeStages = computed(() => this.customStages() ?? DEFAULT_STAGES)
  readonly selectedStageId = signal('seed')

  readonly currentStage = computed(
    () => this.activeStages().find((s) => s.id === this.selectedStageId()) ?? this.activeStages()[0]!,
  )

  get rootClass(): string {
    return cn('bg-background relative overflow-hidden py-16 sm:py-24', this.className)
  }

  stepperButtonClass(id: string): string {
    return cn(
      'group relative flex flex-col items-start rounded-xl border p-4 text-left transition-[color,background-color,border-color,box-shadow,transform] duration-150 active:scale-[0.98] active:duration-100',
      this.selectedStageId() === id
        ? 'border-primary bg-primary/5 ring-primary/20 shadow-xs ring-1'
        : 'border-border bg-card hover:bg-muted/40 text-muted-foreground hover:text-foreground',
    )
  }
}
  • src/app/components/blocks/feature-metric-growth-stepper/index.ts0.1 kB

Raw manifest:https://uipkge.dev/r/angular/feature-metric-growth-stepper.json