# KPI Card

A compact metric card for dashboard summary rows. The icon sits in a small box tinted by `accent`, a matching glow fills the top corner, and the value counts up on mount. People behind the metric show as an overlapping stack; anyone without a photo, or whose photo fails to load, shows as an initial.

<demo-kpi-card>



</demo-kpi-card>

## Usage

```vue
<script setup lang="ts">
  import KpiCard from '~/components/ui/kpi-card/KpiCard.vue';
  import type { KpiPerson } from '~/components/ui/kpi-card/types';

  const people: KpiPerson[] = [
    { name: 'Maya', src: '/avatars/maya.jpg' },
    { name: 'Leo' },
    { name: 'Ava', src: '/avatars/ava.jpg' },
  ];
</script>

<template>
  <KpiCard
    label="Total Users"
    :value="356"
    icon="users"
    accent="violet"
    :people="people"
    @menu="openMenu"
  />
</template>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        label
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Metric name
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        value
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Current value; counts up on mount
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        icon
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Lucide icon name without the prefix
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        accent
      </code>
    </td>
    
    <td>
      <code>
        'violet' | 'emerald' | 'blue' | 'rose' | 'amber'
      </code>
    </td>
    
    <td>
      <code>
        'violet'
      </code>
    </td>
    
    <td>
      Tints the icon and corner glow
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        people
      </code>
    </td>
    
    <td>
      <code>
        { name: string; src?: string }[]
      </code>
    </td>
    
    <td>
      <code>
        []
      </code>
    </td>
    
    <td>
      People behind the metric
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        max-people
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        3
      </code>
    </td>
    
    <td>
      People shown before <code>
        +N
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        show-menu
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Shows the actions button
    </td>
  </tr>
</tbody>
</table>

The actions button emits `menu` with the click event, so you can open your own dropdown.

Motion respects `prefers-reduced-motion`.