# Control Card

A frosted-glass card for smart-home and device dashboards. The round power button fills with the accent color when on. The card blurs whatever is behind it, so place it over a photo or a colorful background.

<demo-control-card>



</demo-control-card>

## Usage

```vue
<script setup lang="ts">
  import { ref } from 'vue';
  import ControlCard from '~/components/ui/control-card/ControlCard.vue';

  const on = ref(true);
</script>

<template>
  <ControlCard
    v-model:on="on"
    category="Wi-Fi"
    name="Starlink Internet"
    icon="wifi"
    :stat="{ icon: 'gauge', value: 'Speed ~ 1GB', label: 'Active' }"
  />
</template>
```

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        category
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Device type
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        name
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Device name
    </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>
        stat
      </code>
    </td>
    
    <td>
      <code>
        { icon: string; value: string; label: string }
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Reading shown in the boxed row
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'oklch(0.55 0.22 264)'
      </code>
    </td>
    
    <td>
      Power button color while on
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        v-model:on
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Power state
    </td>
  </tr>
</tbody>
</table>

The text is white by design, so the card needs a darker or busy backdrop to stay legible.

Motion respects `prefers-reduced-motion`.