184 Components
Keyboard Shortcut Stack
ButtonsRaycast and Linear inspired tactile 3D keyboard keycap badges with real window keyboard event listeners that physically depress and glow when pressed on physical keyboards.
Tactile 3D Physical Keycaps
Press on your real keyboard (⌘, Shift, K, Enter, Esc) or click any keycap:
Command PaletteGlobal spotlight search & quick actions
+
Command RunnerExecute developer tooling actions
++
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/keyboard-shortcut-stack.json"
Props
TypeScript props supported by <KeyboardShortcutStack />.
| Prop | Type | Default | Description |
|---|---|---|---|
| keys | string[] | ["⌘", "K"] | Array of key labels displayed in the stack. |
| title | string | "Command Palette" | Shortcut action title. |
| description | string | — | Secondary helper text. |
| size | "sm" | "md" | "lg" | "md" | Size of all keycaps in the stack. |
| onTrigger | () => void | — | Callback when shortcut is clicked or triggered. |
Key Features
- Tactile 3D beveled keycap styling that depresses by 3px on press.
- Real window keyboard listener matching physical modifier and alphanumeric keys.
- Responsive sizing: sm, md, and lg.
- Stack container for full shortcuts with title and description.
- Zero-dependency spring physics and prefers-reduced-motion support.
Keyboard & Accessibility
- Keyboard accessible button elements with standard focus rings.
- Clear visual press states in both light and dark themes.