Kbd

Renders a keyboard key in a styled <kbd> element. Maps 40+ key names to their platform symbols, and ships a Shortcut helper that auto-detects macOS vs Windows/Linux.

⌘+K↵⌃+⇧+P

Shortcut Helper

Pass a named shortcut (save, copy, paste, undo, etc.) and the platform-correct combo is rendered. Pass forceCtrl to use Ctrl on macOS too.

⌃+S⌃+C⌃+Z

Groups

Use KbdGroup to display a sequence of keys (e.g. Vim-style g d).

GD

Installation

Props

PropTypeDefaultDescription
keys*
string | string[]—Key name(s). Names like "cmd", "ctrl", "shift", "enter", "esc", "arrowup" are mapped to symbols (⌘, ⌃, ⇧, ↵, ⎋, ↑).
variant
"default" | "outline" | "ghost""default"Visual style.
size
"sm" | "default" | "lg""default"Font + padding size.