Kbd Key

A 3D keycap that physically depresses when the matching key is pressed.

@spectrumui/kbd-key

Search documentation…⌘K

Press ⌘ K on your keyboard — the caps react

Installation

Usage

import { KbdKey, KbdCombo } from "@/components/spectrumui/kbd-key"

<KbdKey>K</KbdKey>
<KbdCombo keys="meta+k" onTrigger={() => console.log("open palette")} />

API Reference

KbdKey

Renders a single kbd element styled as a keycap. With listen enabled it depresses while the matching real key is held; when onPress is provided the cap is wrapped in a focusable button.

Prop	Type	Default	Description
*`children`	`React.ReactNode`	-	Cap legend, e.g. "K", "⌘" or "esc"
`keyName`	`string`	-	Key matched against KeyboardEvent.key, case-insensitively. Friendly names work: "meta", "ctrl", "shift", "alt", "enter", "escape", "space", "up"… Derived from children when it is a plain string; symbol legends like "⌘" need an explicit keyName
`listen`	`boolean`	`true`	Depress the cap while the real key is held, via a window listener
`onPress`	`() => void`	-	Fires once per press — on a matching keydown or a pointer tap. Also wraps the cap in a button for accessibility
`size`	`"sm" \| "md"`	`"md"`	Visual size of the cap
`className`	`string`	-	Additional classes merged with the default cap styles

KbdCombo

Renders one KbdKey per key joined by + separators. Each cap listens to its own key; when every key is down at the same time the whole combo pulses once and onTrigger fires.

Prop	Type	Default	Description
*`keys`	`string`	-	"+"-separated keys, e.g. "meta+k" or "shift+?". Names map to glyphs: meta → ⌘, shift → ⇧, alt → ⌥, ctrl → ⌃, enter → ↵, space → ␣, escape → esc, arrows → ↑ ↓ ← →
`listen`	`boolean`	`true`	Depress each cap while its real key is held
`onTrigger`	`() => void`	-	Fires once each time every key in the combo is held down simultaneously
`size`	`"sm" \| "md"`	`"md"`	Visual size of the caps
`className`	`string`	-	Additional classes merged with the combo wrapper styles

Examples

Arrow cluster

↑

←↓→

Press your arrow keys — each cap depresses while held

⇧?

A small combo — hold ⇧ and ? together and it pulses