Installation
Examples
Usage
import { Keyboard } from "@/components/ui/keyboard";// Basic usage with default cyberpunk theme
<Keyboard />
// Custom theme with different layout
<Keyboard
theme="retro"
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 | "#F57644" | Glow color for active keys |
activeKeyGlowIntensity | number | 0.8 | Intensity of glow effect for active keys (0-1) |
theme | string | "cyberpunk" | Keyboard theme (cyberpunk, retro, neon, pastel) |
keyColor | string | "#2a2a2a" | Base color for keyboard keys |
keyTextColor | string | "#ffffff" | Text color for keyboard keys |
accentColor | string | "#F57644" | 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 | 0 | X-axis rotation angle in degrees |