Keyboard shortcut

Installation

Usage

Copyimport { KbdShortcut } from "@/components/asciicn/kbd-shortcut";
 
export function PaletteHint() {
  return <KbdShortcut keys="mod+shift+p" />;
}

keys is the shortcut as text. Join the keys of a chord with +, and separate steps with a space: "g i" draws G then I. Write ++ or a lone + for the plus key.

mod is ⌘ on a Mac and Ctrl elsewhere. Other names: ctrl, alt (or option), shift, meta (or cmd), enter, esc, tab, space, backspace, delete and the arrows up, down, left and right. Anything else is shown as written, with single letters in capitals.

On a Mac the caps show symbols, ⌘ ⇧ P. On a PC they show words joined by +, Ctrl + Shift + P. platform="auto" picks from the visitor's browser after the page loads; set "mac" or "pc" to fix it.

A cap keycap is three rows of box-drawing glyphs with a heavy bottom edge for depth:

Copy┌─────┐ ┌───┐ ┌───┐
│  ⌘  │ │ ⇧ │ │ P │
┕━━━━━┙ ┕━━━┙ ┕━━━┙

With listen, a cap presses down while the visitor holds its key: the bottom edge goes flat and the label turns to reverse video. onTrigger runs each time the whole chord goes down.

variant="inline" sets each key in brackets on one row, [⌘] [K], to sit inside menus and running text.

Examples

Menu

Inline shortcuts aligned to the right of each action.

Cheat sheet

Keycaps in grey, in two groups.

Props

Notes

• The root and each key are <kbd> elements, as HTML nests them for a key combination. Box-drawing glyphs are hidden from screen readers, and each symbol has a spoken name, so ⌘ reads as "Command".
• listen only watches the keyboard; it never stops the browser or the page from handling a shortcut. Pair it with your own handler.
• The server renders PC labels. On a Mac, platform="auto" swaps in the symbols right after hydration.
• Pressing is instant, with no animation, because it answers the visitor's own keys.