UIPackage
Menu

Framework

VueReact

Change language

Boilerplate repo

Customer Metrics Band

blockmarketing
Boilerplate repo

Customer velocity and ROI telemetry band with cohort segmentation (Enterprise vs High-Growth), 4 verified KPI metric tiles, and deep-dive impact inspector.

Also available for React ->

Installation

$npx shadcn-vue@latest add https://uipkge.dev/r/vue/customer-metrics-band.json
Named registry:npx shadcn-vue@latest add @uipkge/customer-metrics-bandInstalls to:app/components/blocks/

Variants

Loading interactive previews…

Schema

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

MetricStat
interface MetricStat {
  id: string
  label: string
  value: string
  baseline: string
  change: string
  isPositive: boolean
  description: string
  details: {
    before: string
    after: string
    impact: string
  }
}

npm dependencies

lucide-vue-next

Includes

badgecard

Files installed (1)

  • app/components/blocks/CustomerMetricsBand.vue11.1 kB
    <script setup lang="ts">
import { computed, ref } from 'vue'
import { Gauge } from 'lucide-vue-next'
import { Badge } from '@/components/ui/badge'
import { Card } from '@/components/ui/card'

type Cohort = 'all' | 'enterprise' | 'startups'

interface MetricStat {
  id: string
  label: string
  value: string
  baseline: string
  change: string
  isPositive: boolean
  description: string
  details: {
    before: string
    after: string
    impact: string
  }
}

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

const activeCohort = ref<Cohort>('all')
const activeMetricId = ref<string>('velocity')

const currentMetricList = computed(() => metricsByCohort[activeCohort.value])
const selectedMetric = computed(
  () => currentMetricList.value.find((m) => m.id === activeMetricId.value) || currentMetricList.value[0],
)
</script>

<template>
  <section
    data-slot="customer-metrics-band"
    class="border-border/80 bg-muted/10 relative overflow-hidden border-y px-4 py-16 sm:px-6 sm:py-24 lg:px-8"
  >
    <div class="mx-auto max-w-6xl space-y-12">
      <!-- Section Header with Cohort Switcher -->
      <div
        class="border-border/60 flex flex-col items-center justify-between gap-6 border-b pb-8 text-center md:flex-row md:text-left"
      >
        <div class="space-y-2">
          <Badge variant="secondary" class="gap-1.5 px-3 py-1 font-mono text-xs shadow-xs">
            <Gauge class="text-primary size-3.5" />
            Verified Customer Impact Benchmark
          </Badge>
          <h2 class="text-foreground text-3xl font-bold tracking-tight">
            Proven engineering velocity at global scale.
          </h2>
          <p class="text-muted-foreground text-xs sm:text-sm">
            Aggregated telemetry from over 1,400+ production applications built with UIPKGE.
          </p>
        </div>

        <!-- Cohort Switcher Tabs -->
        <div class="bg-background border-border flex shrink-0 items-center gap-1 rounded-xl border p-1">
          <button
            v-for="c in [
              { id: 'all', label: 'All Teams' },
              { id: 'enterprise', label: 'Enterprise 500' },
              { id: 'startups', label: 'High-Growth' },
            ] as const"
            :key="c.id"
            type="button"
            class="rounded-lg px-3 py-1.5 font-mono text-xs transition-colors"
            :class="
              activeCohort === c.id
                ? 'bg-primary text-primary-foreground font-semibold shadow-xs'
                : 'text-muted-foreground hover:text-foreground'
            "
            @click="activeCohort = c.id"
          >
            {{ c.label }}
          </button>
        </div>
      </div>

      <!-- 4-Tile KPI Metric Cards Grid -->
      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <Card
          v-for="stat in currentMetricList"
          :key="stat.id"
          class="border-border bg-card/90 flex cursor-pointer flex-col justify-between space-y-4 rounded-2xl p-5 shadow-sm transition-colors hover:shadow-md"
          :class="activeMetricId === stat.id ? 'ring-primary border-primary/60 bg-card ring-2' : ''"
          @click="activeMetricId = stat.id"
        >
          <div class="space-y-2">
            <div class="flex items-center justify-between">
              <span class="text-muted-foreground max-w-[160px] truncate font-mono text-xs">{{ stat.label }}</span>
              <Badge variant="outline" class="border-success/20 bg-success/10 text-success font-mono text-xs">
                {{ stat.change }}
              </Badge>
            </div>
            <p class="text-foreground font-mono text-3xl font-bold tracking-tight sm:text-4xl">{{ stat.value }}</p>
          </div>

          <p class="text-muted-foreground border-border/60 border-t pt-2 text-xs leading-relaxed">
            {{ stat.baseline }}
          </p>
        </Card>
      </div>

      <!-- Interactive Detailed Breakdown Card for Selected KPI -->
      <Card
        class="border-border bg-card/95 space-y-6 overflow-hidden rounded-2xl p-6 text-left shadow-xl backdrop-blur-md sm:p-8"
      >
        <div
          class="border-border flex flex-col items-start justify-between gap-4 border-b pb-4 sm:flex-row sm:items-center"
        >
          <div class="space-y-1">
            <div class="flex items-center gap-2">
              <span class="bg-primary size-2 rounded-full" />
              <h3 class="text-foreground font-mono text-base font-bold">
                {{ selectedMetric.label }} &mdash; Deep Dive
              </h3>
            </div>
            <p class="text-muted-foreground text-xs">{{ selectedMetric.description }}</p>
          </div>
          <Badge variant="secondary" class="text-primary font-mono text-xs font-semibold">
            Cohort: {{ activeCohort.toUpperCase() }}
          </Badge>
        </div>

        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
          <div class="border-border bg-background/50 space-y-1 rounded-xl border p-4">
            <p class="text-muted-foreground font-mono text-xs">Monolithic Package Baseline</p>
            <p class="text-muted-foreground font-mono text-lg font-bold line-through">
              {{ selectedMetric.details.before }}
            </p>
          </div>
          <div class="border-border bg-background/50 space-y-1 rounded-xl border p-4">
            <p class="text-success font-mono text-xs font-semibold">UIPKGE Unbundled Registry</p>
            <p class="text-success font-mono text-lg font-bold">
              {{ selectedMetric.details.after }}
            </p>
          </div>
          <div class="border-border bg-primary/5 space-y-1 rounded-xl border p-4">
            <p class="text-primary font-mono text-xs font-semibold">Net Engineering Impact</p>
            <p class="text-foreground font-mono text-lg font-bold">{{ selectedMetric.details.impact }}</p>
          </div>
        </div>
      </Card>
    </div>
  </section>
</template>

Raw manifest:https://uipkge.dev/r/vue/customer-metrics-band.json