127 Components
Keycap Chips
ButtonsRaycast-inspired 3D tactile physical keyboard keycaps with realistic chamfer bevels, inset mechanical shadows, physical depression animations, and interactive keyboard listener.
Tactile Keycap Chipsobsidian
Raycast-grade 3D mechanical bevels with keypress haptics
NavigationOpen Command Palette
⌘K
WorkbenchQuick File Search
⌘P
Source ControlCommit & Instant Push
⌘⇧↵
Developer ToolsToggle Embedded Terminal
⌃`
DisplayToggle Zen Fullscreen
⌥⌘F
LAST KEY: NONEGLOBAL LISTENER: ACTIVE
Tactile Keycap Chipsobsidian
Raycast-grade 3D mechanical bevels with keypress haptics
NavigationOpen Command Palette
⌘K
WorkbenchQuick File Search
⌘P
Source ControlCommit & Instant Push
⌘⇧↵
Developer ToolsToggle Embedded Terminal
⌃`
DisplayToggle Zen Fullscreen
⌥⌘F
LAST KEY: NONEGLOBAL LISTENER: ACTIVE
Tactile Keycap Chipsobsidian
Raycast-grade 3D mechanical bevels with keypress haptics
NavigationOpen Command Palette
⌘K
WorkbenchQuick File Search
⌘P
Source ControlCommit & Instant Push
⌘⇧↵
Developer ToolsToggle Embedded Terminal
⌃`
DisplayToggle Zen Fullscreen
⌥⌘F
LAST KEY: NONEGLOBAL LISTENER: ACTIVE
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/keycap-chips.json"
Props
TypeScript props supported by <KeycapChips />.
| Prop | Type | Default | Description |
|---|---|---|---|
| shortcuts | ShortcutItem[] | — | Array of shortcut items with label, category, and keys list. |
| size | "sm" | "md" | "lg" | "md" | Physical dimensions and typography scale of keycaps. |
| variant | "obsidian" | "classic" | "cyber" | "porcelain" | "obsidian" | Aesthetic colorway and shadow finish of the keycaps. |
| enableGlobalListener | boolean | true | Whether physical keystrokes on the user's keyboard trigger key depression. |
| className | string | — | Optional custom classes applied to the root container. |
| keys | string[] | — | Array of individual keycap symbols to render |
| inline | boolean | — | Whether keycaps render inline with prose text |
| onShortcutPress | (shortcut: ShortcutCombo) => void | — | Callback triggered when physical shortcut combination is activated |
Key Features
- Physical 3D bevels with layered drop-shadows and tactile bottom edge extrusion.
- Realistic spring depression physics on active click or physical keyboard press.
- Integrated live keyboard listener detecting key strokes in real time.
- Preset command pallets (Command Menu ⌘K, Spotlight ⌥Space, Git Commit ⌘↵, Quick Search Ctrl/).
- Multiple finishes: Matte Obsidian, Mechanical Classic, Cyber Amber, and Porcelain White.
Keyboard & Accessibility
- Key combinations are semantically marked up with HTML <kbd> elements.
- Each keycap is keyboard focusable and playable with Space or Enter.
- Includes ARIA labels clearly communicating the keystroke sequence to screen readers.