{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "metric-card",
  "title": "Metric Card",
  "description": "Compact dashboard metric with a trend badge and inline sparkline.",
  "files": [
    {
      "path": "components/cards/MetricCard.tsx",
      "content": "type MetricCardProps = {\n  label?: string;\n  value?: string;\n  change?: string;\n  detail?: string;\n  className?: string;\n};\n\nexport default function MetricCard({\n  label = 'Monthly revenue',\n  value = '$48,294',\n  change = '+12.4%',\n  detail = 'Compared with last month',\n  className = '',\n}: MetricCardProps) {\n  return (\n    <article\n      className={[\n        'w-full max-w-sm rounded-[var(--radius-2xl,1rem)] border border-[color:var(--color-border,#e5e7eb)] bg-[var(--color-card,#fff)] p-5 shadow-sm',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className='flex items-start justify-between gap-4'>\n        <div>\n          <p className='text-sm font-medium text-[color:var(--color-muted-foreground,#4b5563)]'>{label}</p>\n          <p className='mt-2 text-3xl font-semibold tracking-tight text-[color:var(--color-card-foreground,#111827)]'>{value}</p>\n        </div>\n        <span className='rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-700'>\n          {change}\n        </span>\n      </div>\n      <svg viewBox='0 0 280 56' className='mt-6 h-14 w-full' fill='none' aria-hidden>\n        <path d='M2 47C24 45 29 36 50 39C70 42 77 24 98 29C119 34 124 20 145 23C167 26 177 9 198 14C219 19 231 5 250 9C263 12 271 5 278 2' stroke='#10B981' strokeWidth='3' strokeLinecap='round' />\n        <path d='M2 47C24 45 29 36 50 39C70 42 77 24 98 29C119 34 124 20 145 23C167 26 177 9 198 14C219 19 231 5 250 9C263 12 271 5 278 2V56H2V47Z' fill='url(#metric-fill)' opacity='.12' />\n        <defs>\n          <linearGradient id='metric-fill' x1='0' y1='0' x2='0' y2='56' gradientUnits='userSpaceOnUse'>\n            <stop stopColor='#10B981' />\n            <stop offset='1' stopColor='#10B981' stopOpacity='0' />\n          </linearGradient>\n        </defs>\n      </svg>\n      <p className='mt-3 text-xs text-[color:var(--color-muted-foreground,#6b7280)]'>{detail}</p>\n    </article>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/cards/MetricCard.tsx"
    }
  ],
  "categories": [
    "cards"
  ],
  "type": "registry:component"
}