MetricsGrid

Render a responsive marketing metrics section from app-owned data.

Growth signals

A compact proof section for product momentum

Show formatted metrics from your app without moving analytics, formatting, or tracking behavior into the block.

Activation lift

42%

More teams reach their first successful workflow in week one.

Median response

< 90s

Support queues stay fast during product launches and migrations.

Accounts monitored

12k+

Usage, billing, and health signals roll into one operator view.

Enterprise retention

98.4%

Contract renewals stay predictable with proactive account alerts.

Installation


pnpm dlx shadcn-vue@latest add "https://ui.stackhacker.io/r/metrics-grid.json"

Usage

<script setup lang="ts">
import { MetricsGrid, type MetricsGridItem } from '@/components/metrics-grid'

const metrics: MetricsGridItem[] = [
  {
    value: '42%',
    label: 'Activation lift',
    description: 'More teams reach their first successful workflow.',
    tone: 'primary'
  },
  {
    value: '< 90s',
    label: 'Median response',
    description: 'Support queues stay fast during launches.',
    tone: 'success'
  },
  {
    value: '12k+',
    label: 'Accounts monitored',
    description: 'Usage and health signals roll into one view.',
    tone: 'warning'
  }
]
</script>

<template>
  <MetricsGrid
    headline="Growth signals"
    title="A compact proof section for product momentum"
    description="Show formatted metrics from your app without moving analytics into the block."
    :items="metrics"
  />
</template>

App-Owned Metrics

MetricsGrid renders the values you pass in. Your app owns data loading, number formatting, localization, analytics, animation, and any metric definitions.

Pass formatted strings such as 42%, < 90s, or 12k+ through items[].value. Use tone for constrained visual emphasis instead of passing raw Tailwind classes through metric data.

Examples

Cards