A keyboard shortcut drawn as key caps: `mod` reads as Command on Apple platforms and Control elsewhere, modifiers and special keys get their symbols, and the whole shortcut is spelled out for screen readers. With `live` on, each cap presses down while the real key is held and the combo glows when it is complete; `onTrigger` turns the same caps into the listener for the shortcut. Combos and sequences ("g then i"), three tones and three sizes.
The import and the props worth knowing about, in one place.
import { KbdCombo } from "@/components/beste/component/kbd-combo";
// Static caps. `mod` is ⌘ on a Mac and Ctrl everywhere else
<KbdCombo keys="mod+k" />
// The caps press down as the reader holds the keys
<KbdCombo keys="mod+shift+p" live size="lg" />
// The same caps own the shortcut
<KbdCombo keys="mod+k" live onTrigger={() => console.log("Open the palette")} />
// A sequence, pressed one key after another
<KbdCombo keys="g then i" sequence live onTrigger={() => console.log("Go to inbox")} />
<KbdCombo
keys={["alt", "up"]}
separator="plus" // "none" | "plus" | "then"
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Hold the keys shown | With Live on, each cap presses down while its key is held. |
|---|---|
| Press the whole shortcut | The caps glow for a moment, and onTrigger fires if one is given. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
keys* | string | string[] | — | The shortcut: "mod+shift+k", or an array of keys. `mod` is Command on Apple platforms and Control elsewhere. |
sequence | boolean | — | Read `keys` as a sequence pressed one after another ("g then i") instead of held together. |
separator | "none" | "plus" | "then" | — | What sits between caps. Defaults to "then" for sequences, and to "none" for combos. |
live | boolean | — | Caps press down while the reader holds the real keys, and the combo glows when it is complete. |
onTrigger | (event: KeyboardEvent) => void | — | Fires when the shortcut is pressed. The default action of that key press is prevented. |
enabled | boolean | true | Listen for the shortcut at all. |
allowInInputs | boolean | — | Also answer while focus is in an input, textarea, select or editable element. |
tone | "muted" | "outline" | "ghost" | "muted" | Surface of each cap: filled (default), hairline outline, or bare until pressed. |
size | "sm" | "default" | "lg" | "default" | Cap size preset. |
className | string | — | |
aria-label | string | — | Accessible name. Falls back to the spelled-out shortcut, e.g. "Command K". |
Everything in the studio, without reaching for the mouse.