An interactive Mac keyboard with real key tracking, sound effects, and visual feedback. Press keys on your keyboard to see them light up.
$ npx shadcn-vue@latest add "https://nxui.geoql.in/r/mac-keyboard.json"Keep in mind
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
<script setup lang="ts">
import MacKeyboard from '~/components/ui/mac-keyboard/MacKeyboard.vue';
</script>
<template>
<MacKeyboard />
</template>
| Prop | Type | Default | Description |
|---|---|---|---|
sound-src | string | '/audio/key-press.wav' | URL to the key press sound effect |
class | string | '' | Additional CSS classes for the container |
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | '' | Key label text |
sub-label | string | '' | Secondary label (e.g. shifted character) |
icon | string | '' | Icon name for @nuxt/icon |
icon-label | string | '' | Text label below the icon |
width | number | 1 | Relative width of the key |
key-code | string | '' | KeyboardEvent.code to match |
no-aspect-ratio | boolean | false | Disable square aspect ratio (for arrows) |