Esc
F1
F2
F3
F4
F5
F6
F7
F8
F9
F10
F11
F12
`
1
2
3
4
5
6
7
8
9
0
-
=
Backspace
Tab
Q
W
E
R
T
Y
U
I
O
P
[
]
\
Caps
A
S
D
F
G
H
J
K
L
;
'
Enter
Shift
Z
X
C
V
B
N
M
,
.
/
Shift
Ctrl
Alt
Space
Alt
Ctrl
Installation
Examples
Esc
F1
F2
F3
F4
F5
F6
F7
F8
F9
F10
F11
F12
`
1
2
3
4
5
6
7
8
9
0
-
=
Backspace
Tab
Q
W
E
R
T
Y
U
I
O
P
[
]
\
Caps
A
S
D
F
G
H
J
K
L
;
'
Enter
Shift
Z
X
C
V
B
N
M
,
.
/
Shift
Ctrl
Alt
Space
Alt
Ctrl
Usage
import { Keyboard } from "@/components/ui/keyboard";// Basic usage with default cyberpunk theme
<Keyboard />
// Custom theme with different layout
<Keyboard
theme="mechanical"
layout="compact"
showFunctionKeys={false}
/>
// Active keys highlighting
<Keyboard
activeKeys={["KeyW", "KeyA", "KeyS", "KeyD"]}
activeKeyGlowColor="#ff5555"
activeKeyGlowIntensity={0.9}
/>
// Custom styling and event handlers
<Keyboard
theme="neon"
keyColor="#1a1a2e"
keyTextColor="#e6e6e6"
accentColor="#ff2a6d"
onKeyPress={(code, key) => console.log(`Pressed: ${code}, ${key}`)}
onKeyRelease={(code, key) => console.log(`Released: ${code}, ${key}`)}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
layout | string | "standard" | Keyboard layout (standard or compact) |
showFunctionKeys | boolean | true | Show function keys (F1-F12) row |
showNavigationCluster | boolean | true | Show navigation key cluster |
activeKeys | string[] | [] | Array of key codes to highlight as active |
activeKeyGlowColor | string | "#6366f1" | Glow color for active keys |
activeKeyGlowIntensity | number | 0.8 | Intensity of glow effect for active keys (0-1) |
theme | string | "cyberpunk" | Keyboard theme (cyberpunk, minimal, retro, mechanical, neon, pastel) |
keyColor | string | "#2a2a2a" | Base color for keyboard keys |
keyTextColor | string | "#ffffff" | Text color for keyboard keys |
accentColor | string | "#6366f1" | Accent color for special keys and highlights |
keyPressedColor | string | "#333333" | Color for pressed keys |
keyPressAnimationDuration | number | 150 | Duration of key press animation in milliseconds |
onKeyPress | function | () => {} | Callback function when a key is pressed (code: string, key?: string) => void |
onKeyRelease | function | () => {} | Callback function when a key is released (code: string, key?: string) => void |
className | string | "" | Additional CSS classes to apply |
allowPhysicalKeyboard | boolean | true | Allow physical keyboard integration |
perspective | number | 1000 | CSS perspective value for 3D effect |
rotateX | number | 10 | X-axis rotation angle in degrees |