{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "feature-metric-growth-stepper", "title": "Feature Metric Growth Stepper", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/feature-metric-growth-stepper/FeatureMetricGrowthStepper.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { Activity, ArrowRight, CheckCircle2, Cpu, Globe, ShieldCheck, TrendingUp, Zap } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface GrowthStage {\n id: string\n name: string\n stageLabel: string\n mrrRange: string\n description: string\n users: string\n qps: string\n nodes: number\n sla: string\n features: string[]\n}\n\nexport interface FeatureMetricGrowthStepperProps {\n title?: string\n description?: string\n stages?: GrowthStage[]\n className?: string\n}\n\nconst DEFAULT_STAGES: GrowthStage[] = [\n {\n id: 'seed',\n name: 'Seed & Validation',\n stageLabel: 'Stage 01',\n mrrRange: '$0 – $10k / mo',\n description:\n 'Instant zero-dependency UI primitives copied directly into your repository. Zero lock-in, zero build overhead.',\n users: '1k – 25k MAU',\n qps: '500 req/s',\n nodes: 3,\n sla: '99.9% Best Effort',\n features: [\n 'Unbundled component source ownership',\n 'Tailwind v4 theme variables',\n 'Single-command CLI installation',\n ],\n },\n {\n id: 'series-a',\n name: 'Series A Product-Market Fit',\n stageLabel: 'Stage 02',\n mrrRange: '$10k – $100k / mo',\n description: 'Scale complex dashboards and interactive blocks with full Reka UI/Radix headless accessibility.',\n users: '25k – 250k MAU',\n qps: '4,500 req/s',\n nodes: 12,\n sla: '99.95% Standard SLA',\n features: [\n 'Complex KPI grids & interactive charts',\n 'RBAC permission workspace switchers',\n 'Dual-framework Astro preview integration',\n ],\n },\n {\n id: 'scale',\n name: 'Hypergrowth Expansion',\n stageLabel: 'Stage 03',\n mrrRange: '$100k – $1M / mo',\n description:\n 'High-throughput global edge deployment with sub-millisecond component compilation and dedicated design system sync.',\n users: '250k – 2.5M MAU',\n qps: '35,000 req/s',\n nodes: 48,\n sla: '99.99% High Availability',\n features: [\n 'Global edge caching mesh',\n 'Automated cross-framework AST parity tests',\n 'Custom token preset distribution',\n ],\n },\n {\n id: 'enterprise',\n name: 'Global Enterprise Scale',\n stageLabel: 'Stage 04',\n mrrRange: '$1M+ / mo',\n description:\n 'Mission-critical resilience with multi-region failover, custom compliance SLAs, and dedicated design engineering support.',\n users: '10M+ MAU',\n qps: '250,000 req/s',\n nodes: 310,\n sla: '99.999% Fault Tolerant',\n features: [\n 'SOC2 & HIPAA compliant architecture',\n 'Sub-10ms global TTFB guarantees',\n '24/7 dedicated incident commander',\n ],\n },\n]\n\nexport function FeatureMetricGrowthStepper({\n title = 'Scale your frontend architecture directly as your traffic expands.',\n description = 'From single-developer seed prototypes to global multi-region enterprise platforms, unbundled components adapt to your infrastructure requirements.',\n stages = DEFAULT_STAGES,\n className,\n}: FeatureMetricGrowthStepperProps) {\n const [selectedStageId, setSelectedStageId] = React.useState('seed')\n\n const currentStage = React.useMemo(() => {\n return stages.find((s) => s.id === selectedStageId) || stages[0]\n }, [stages, selectedStageId])\n\n return (\n \n
\n {/* Section Header */}\n
\n \n \n Scale-Ready Architecture Stepper\n \n \n\n

{title}

\n\n

{description}

\n
\n\n {/* Stepper Milestone Bar */}\n
\n
\n {stages.map((stage) => (\n setSelectedStageId(stage.id)}\n >\n
\n \n {stage.stageLabel}\n \n \n
\n\n
{stage.name}
\n
{stage.mrrRange}
\n \n ))}\n
\n
\n\n {/* Active Stage Deep-Dive Workbench */}\n
\n {/* Left: Stage Description & Architecture Capabilities (7 Cols) */}\n \n \n
\n
\n \n {currentStage.stageLabel} • {currentStage.name}\n \n
Architecture Capacity
\n
\n
\n
Target Growth Band
\n
{currentStage.mrrRange}
\n
\n
\n\n

{currentStage.description}

\n\n {/* Technical Checklist */}\n
\n
\n Verified Infrastructure Benchmarks\n
\n
\n {currentStage.features.map((feature, fIdx) => (\n \n \n {feature}\n
\n ))}\n
\n
\n \n \n\n {/* Right: Infrastructure Load Telemetry (5 Cols) */}\n \n \n
\n
\n \n Infrastructure Profile\n
\n \n {currentStage.sla}\n \n
\n\n {/* Telemetry Metrics Grid */}\n
\n
\n
\n \n Monthly Active Users\n
\n
{currentStage.users}
\n
\n\n
\n
\n \n Throughput (QPS)\n
\n
{currentStage.qps}
\n
\n\n
\n
\n \n Edge PoP Nodes\n
\n
{currentStage.nodes} PoPs
\n
\n\n
\n
\n \n Uptime Guarantee\n
\n
{currentStage.sla.split(' ')[0]}
\n
\n
\n\n \n \n \n
\n \n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/feature-metric-growth-stepper/FeatureMetricGrowthStepper.tsx" }, { "path": "packages/registry-react/blocks/feature-metric-growth-stepper/index.ts", "content": "export { FeatureMetricGrowthStepper } from './FeatureMetricGrowthStepper'\nexport type { FeatureMetricGrowthStepperProps, GrowthStage } from './FeatureMetricGrowthStepper'\n", "type": "registry:block", "target": "~/components/blocks/feature-metric-growth-stepper/index.ts" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json" ], "description": "Interactive scale progression workbench showing infrastructure capacity from Seed to Global Enterprise.", "categories": [ "feature", "marketing" ] }