DocsMac 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

Dependencies: lucide-react

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

API Reference

PropTypeDefault
soundSrcstring

URL of a key-click audio asset. Supply your own file or an empty string to disable sound.

"/audio/key-press.wav"
childrenReact.ReactNode

Optional custom MacKey children instead of the full keyboard layout.

—
classNamestring

Additional container styles.

—

Keep in mind

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

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
PreviousLiquid Glass CarouselNextMagnetic Dock
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>
  );
}