# Mac Keyboard

> An interactive Mac keyboard with real key tracking, sound effects, and visual feedback. Press keys on your keyboard to see them light up.

<demo-mac-keyboard>



</demo-mac-keyboard>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/mac-keyboard.json"
```

## Usage

```vue
<script setup lang="ts">
  import MacKeyboard from '~/components/ui/mac-keyboard/MacKeyboard.vue';
</script>

<template>
  <MacKeyboard />
</template>
```

## Props

### MacKeyboard

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

<tbody>
  <tr>
    <td>
      <code>
        sound-src
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '/audio/key-press.wav'
      </code>
    </td>
    
    <td>
      URL to the key press sound effect
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Additional CSS classes for the container
    </td>
  </tr>
</tbody>
</table>

### MacKeyboardKey

<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>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Key label text
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        sub-label
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Secondary label (e.g. shifted character)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        icon
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Icon name for @nuxt/icon
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        icon-label
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Text label below the icon
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        width
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Relative width of the key
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        key-code
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      KeyboardEvent.code to match
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        no-aspect-ratio
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Disable square aspect ratio (for arrows)
    </td>
  </tr>
</tbody>
</table>