{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "customer-metrics-band", "title": "Customer Metrics Band", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/customer-metrics-band/CustomerMetricsBand.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { Gauge } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\ntype Cohort = 'all' | 'enterprise' | 'startups'\n\ninterface MetricStat {\n id: string\n label: string\n value: string\n baseline: string\n change: string\n isPositive: boolean\n description: string\n details: {\n before: string\n after: string\n impact: string\n }\n}\n\nconst metricsByCohort: Record = {\n all: [\n {\n id: 'velocity',\n label: 'Time to First Production Release',\n value: '4.2x',\n baseline: 'Reduced from 14 weeks to 18 days',\n change: '+320% Faster',\n isPositive: true,\n description: 'Engineering squads ship complete vertical workflows without custom CSS boilerplate.',\n details: { before: '98 Days average', after: '18 Days average', impact: '80 days saved per major launch' },\n },\n {\n id: 'vitals',\n label: 'Core Web Vitals Pass Rate',\n value: '99.4%',\n baseline: 'Tested across 10M+ mobile pageviews',\n change: '+28.4% vs monolithic',\n isPositive: true,\n description: 'OKLCH zero-runtime styling ensures sub-50ms INP and pristine Lighthouse 100 scores.',\n details: { before: '71.0% Pass Rate', after: '99.4% Pass Rate', impact: 'Zero layout shift (CLS 0.00)' },\n },\n {\n id: 'maintenance',\n label: 'Design System Maintenance Cost',\n value: '-74%',\n baseline: 'Engineering hours spent upgrading packages',\n change: '-74% Reduction',\n isPositive: true,\n description: 'Direct code ownership eliminates breaking semver dependency conflicts permanently.',\n details: { before: '24 hrs / developer / mo', after: '6.2 hrs / developer / mo', impact: '17.8 hrs reclaimed' },\n },\n {\n id: 'cloud_savings',\n label: 'Average Annual Compute & Bandwidth Saved',\n value: '$184k',\n baseline: 'Calculated across high-traffic SaaS suites',\n change: 'Zero AST bloat',\n isPositive: true,\n description: 'Zero unused component CSS in bundle output lowers edge bandwidth distribution costs.',\n details: { before: '640 kB vendor chunks', after: '38 kB tree-shaken chunks', impact: '94% payload reduction' },\n },\n ],\n enterprise: [\n {\n id: 'velocity',\n label: 'Time to First Production Release',\n value: '5.8x',\n baseline: 'Enterprise multi-app design alignment',\n change: '+480% Faster',\n isPositive: true,\n description: 'Standardized AST across 20+ squads without package coordination overhead.',\n details: { before: '180 Days average', after: '31 Days average', impact: '149 days saved per project' },\n },\n {\n id: 'vitals',\n label: 'Core Web Vitals Pass Rate',\n value: '99.8%',\n baseline: 'Internal enterprise portals & dashboards',\n change: '+34.2% uplift',\n isPositive: true,\n description: 'Strict keyboard ergonomics and WCAG AA accessibility out of the box.',\n details: { before: '65.6% Pass Rate', after: '99.8% Pass Rate', impact: '100% compliance audit pass' },\n },\n {\n id: 'maintenance',\n label: 'Design System Maintenance Cost',\n value: '-82%',\n baseline: 'Eliminated dedicated registry sync team',\n change: '-82% Saved',\n isPositive: true,\n description: 'Engineers customize source code in their own repo without waiting on upstream merges.',\n details: {\n before: '3 FTEs maintenance',\n after: '0.5 FTE maintenance',\n impact: '2.5 FTEs reallocated to product',\n },\n },\n {\n id: 'cloud_savings',\n label: 'Average Annual Compute & Bandwidth Saved',\n value: '$420k',\n baseline: 'Tier-1 enterprise infrastructure',\n change: 'Zero CVE risk',\n isPositive: true,\n description: 'No third-party runtime dependencies eliminates transitive package auditing costs.',\n details: { before: '$650k vendor licensing', after: '$230k infrastructure', impact: '$420k saved annually' },\n },\n ],\n startups: [\n {\n id: 'velocity',\n label: 'Time to First Production Release',\n value: '6.4x',\n baseline: 'From idea to paying users in days',\n change: '+540% Faster',\n isPositive: true,\n description: 'Plug-and-play workbenches and CRM blocks ready for Stripe integration on day 1.',\n details: { before: '45 Days to MVP', after: '7 Days to MVP', impact: '38 days faster to revenue' },\n },\n {\n id: 'vitals',\n label: 'Core Web Vitals Pass Rate',\n value: '99.1%',\n baseline: 'Landing pages and conversion flows',\n change: '+22.0% uplift',\n isPositive: true,\n description: 'Blazing fast mobile experiences drive higher conversion rates for early users.',\n details: { before: '77.1% Pass Rate', after: '99.1% Pass Rate', impact: '+14% checkout conversion' },\n },\n {\n id: 'maintenance',\n label: 'Design System Maintenance Cost',\n value: '-90%',\n baseline: 'Zero full-time design engineers needed',\n change: '-90% Overhead',\n isPositive: true,\n description: 'Founders and full-stack devs build world-class Linear-grade interfaces independently.',\n details: {\n before: 'Hiring UI designer ($140k)',\n after: 'Self-serve registry ($0)',\n impact: '$140k runway preserved',\n },\n },\n {\n id: 'cloud_savings',\n label: 'Average Annual Compute & Bandwidth Saved',\n value: '$48k',\n baseline: 'Vercel / Cloudflare edge usage tier',\n change: 'Sub-millisecond cold start',\n isPositive: true,\n description: 'Compact bundle sizes prevent edge function invocation timeouts and memory spikes.',\n details: { before: '350ms cold starts', after: '42ms cold starts', impact: '88% compute reduction' },\n },\n ],\n}\n\nexport interface CustomerMetricsBandProps {\n className?: string\n}\n\nexport function CustomerMetricsBand({ className }: CustomerMetricsBandProps) {\n const [activeCohort, setActiveCohort] = React.useState('all')\n const [activeMetricId, setActiveMetricId] = React.useState('velocity')\n\n const currentMetricList = metricsByCohort[activeCohort]\n const selectedMetric = currentMetricList.find((m) => m.id === activeMetricId) || currentMetricList[0]\n\n return (\n \n
\n {/* Section Header with Cohort Switcher */}\n
\n
\n \n \n Verified Customer Impact Benchmark\n \n

\n Proven engineering velocity at global scale.\n

\n

\n Aggregated telemetry from over 1,400+ production applications built with UIPKGE.\n

\n
\n\n {/* Cohort Switcher Tabs */}\n
\n {[\n { id: 'all', label: 'All Teams' },\n { id: 'enterprise', label: 'Enterprise 500' },\n { id: 'startups', label: 'High-Growth' },\n ].map((c) => (\n setActiveCohort(c.id as Cohort)}\n >\n {c.label}\n \n ))}\n
\n
\n\n {/* 4-Tile KPI Metric Cards Grid */}\n
\n {currentMetricList.map((stat) => (\n setActiveMetricId(stat.id)}\n >\n
\n
\n {stat.label}\n \n {stat.change}\n \n
\n

{stat.value}

\n
\n\n

\n {stat.baseline}\n

\n \n ))}\n
\n\n {/* Interactive Detailed Breakdown Card for Selected KPI */}\n \n
\n
\n
\n \n

\n {selectedMetric.label} — Deep Dive\n

\n
\n

{selectedMetric.description}

\n
\n \n Cohort: {activeCohort.toUpperCase()}\n \n
\n\n
\n
\n

Monolithic Package Baseline

\n

\n {selectedMetric.details.before}\n

\n
\n
\n

UIPKGE Unbundled Registry

\n

{selectedMetric.details.after}

\n
\n
\n

Net Engineering Impact

\n

{selectedMetric.details.impact}

\n
\n
\n \n
\n \n )\n}\nexport default CustomerMetricsBand\n", "type": "registry:block", "target": "~/components/blocks/CustomerMetricsBand.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/card.json" ], "description": "Customer velocity and ROI telemetry band with cohort segmentation (Enterprise vs High-Growth), 4 verified KPI metric tiles, and deep-dive impact inspector.", "categories": [ "marketing" ] }