Keyboard renders a full on-screen keyboard in React that lights up keys as your visitor types on their physical keyboard. Multiple themes and layouts ship as props, and every key press animates so the component doubles as a live typing display. Built with React and Tailwind CSS. Useful for shortcut documentation pages, typing practice apps, kiosk interfaces, and product screenshots that need a believable keyboard.
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 |