Metric Card

# Integrate this UI component

Add this component to my project.

1. Install any missing dependencies.
2. Make sure Tailwind CSS is set up and scans the new file.
3. Prefer passing props over editing the component source — changing the component itself may break it.
4. Adjust colors, size, and layout via props or wrapper classes to match my project. You know my codebase better than this snippet does.

## Component source

```tsx
type MetricCardProps = {
  label?: string;
  value?: string;
  change?: string;
  detail?: string;
  className?: string;
};

export default function MetricCard({
  label = 'Monthly revenue',
  value = '$48,294',
  change = '+12.4%',
  detail = 'Compared with last month',
  className = '',
}: MetricCardProps) {
  return (
    <article
      className={[
        'w-full max-w-sm rounded-2xl border border-gray-200 bg-white p-5 shadow-sm',
        className,
      ]
        .filter(Boolean)
        .join(' ')}
    >
      <div className='flex items-start justify-between gap-4'>
        <div>
          <p className='text-sm font-medium text-gray-600'>{label}</p>
          <p className='mt-2 text-3xl font-semibold tracking-tight text-gray-900'>{value}</p>
        </div>
        <span className='rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-700'>
          {change}
        </span>
      </div>
      <svg viewBox='0 0 280 56' className='mt-6 h-14 w-full' fill='none' aria-hidden>
        <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' />
        <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' />
        <defs>
          <linearGradient id='metric-fill' x1='0' y1='0' x2='0' y2='56' gradientUnits='userSpaceOnUse'>
            <stop stopColor='#10B981' />
            <stop offset='1' stopColor='#10B981' stopOpacity='0' />
          </linearGradient>
        </defs>
      </svg>
      <p className='mt-3 text-xs text-gray-500'>{detail}</p>
    </article>
  );
}

```