Docs/Mac Keyboard

Mac Keyboard

Interactive Mac keyboard replica with real-time keystroke tracking and authentic layout geometry. Features active states for physical key presses and optional sound feedback (requires /audio/key-press.wav).

Installation

$pnpm dlx shadcn@latest add @componentry/mac-keyboard

Usage

Audio Requirement: To enable the typing sound effects, you should download the required audio file and place it in your project's public/audio directory.

Download key-press.wav

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@harshjdhv
esc
F1
F2
F3
F4
F5
F6
F7
F8
F9
F10
F11
F12
~`
!1
@2
#3
$4
%5
^6
&7
*8
(9
)0
_-
+=
delete
tab
Q
W
E
R
T
Y
U
I
O
P
{[
}]
|\
caps lock
A
S
D
F
G
H
J
K
L
:;
"'
return
shift
Z
X
C
V
B
N
M
<,
>.
?/
shift
import { MacKeyboard } from "@/components/ui/mac-keyboard";

export default function KeyboardDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10 bg-neutral-100 dark:bg-neutral-900">
      <MacKeyboard />
    </div>
  );
}