Kbd Shortcut

beta

Labelled keyboard-shortcut hint (“Send ⌘↵”) that can also bind the shortcut and light its keys while pressed.

@kura-ui/react/kbd-shortcutCopy page for agents.md registry.json

minimal

SendControl EnterCtrl↵

Bound shortcut

Press the combo: the keys light up and a counter increments.

full

Toggle panelControl JCtrlJ

Triggered 0 times

Composer footer hints

A row of hints as used under a prompt composer.

composition

Commands//Context@@

SendControl EnterCtrl↵

Installation

npx shadcn@latest add https://kuro.abstergo.fyi/r/kbd-shortcut.json

Copies the source into components/kura/kbd-shortcut with its dependencies (kura-theme, kbd, kura-keys, use-hotkey, utils). Tokens come from the kura-theme item.

When to use it

Use it for

Hints under or inside a prompt composer: “⌘↵ to send”, “Esc to stop”.
Advertise and bind a global shortcut in one element (e.g. ⌘K for search, ⌘J to toggle a panel).
Empty states and onboarding that teach shortcuts.

Reach for something else when

Showing a single key or combo without a label or binding — use kbd.
A shortcut inside a tooltip — pass `shortcut` to tooltip or icon-button instead.
Binding a shortcut with no visible hint — call the useHotkey hook directly.

Props

Prop	Type	Default	Description
keys*	readonly KeyName[]	—	The combo, e.g. ["mod", "enter"]. `mod` renders ⌘ on Apple platforms and Ctrl elsewhere.
label	React.ReactNode	—	Short action label shown before the keys, e.g. "Send".
onTrigger	(event: KeyboardEvent) => void	—	Bind the combo on `document` and call this when pressed. Omit for a display-only hint.
enabled	boolean	true	Enable/disable the binding without hiding the hint (renders dimmed when false).
allowInInputs	boolean	—	Fire while typing in inputs. Defaults to true only when the combo contains a modifier.
variant	"raised" \| "ghost"	"raised"	Keycap style. Use ghost inside buttons and dense toolbars.
size	"sm" \| "md"	"sm"	Keycap size.

All native attributes of the root element, className and ref pass through.

Anatomy

KbdShortcutWrapper; exposes `data-pressed` and `data-bound`.data-slot="kbd-shortcut"
LabelOptional action label.data-slot="kbd-shortcut-label"
KbdThe combo, rendered with the kbd primitive.data-slot="kbd"

Accessibility

Renders a semantic <kbd> combo with visually hidden spoken text (e.g. “Command Enter”); individual glyphs are aria-hidden.
The binding is global (document keydown); without a modifier it is ignored while the user types in inputs.
It is a hint, not a control: the action must also be reachable by a focusable button.
Reduced motion: The 1px key press travel is removed; colour change remains.

Keys	Action
The configured combo	Calls onTrigger and shows the keys pressed

Notes for agents

Use `mod` (not `meta`/`ctrl`) for the primary modifier so it is correct on every platform.
Only one mounted KbdShortcut should bind a given combo; render the others display-only (no onTrigger).
Key names follow KeyboardEvent.key plus aliases: mod, cmd, ctrl, alt/option, shift, enter, esc, up/down/left/right, space.

Display-only hint