Phoundry UI

Kbd

Keyboard shortcut display that renders key combinations with platform-appropriate symbols. Accepts a '+' separated key string.

import { Kbd } from 'phoundry-ui';

Basic Shortcuts

⌘ S ↩ Esc
Show code 
<Kbd keys="Mod+S" />
<Kbd keys="Enter" />
<Kbd keys="Escape" />

Modifier Combos

⌘ ⇧ K ⌃ ⌥ ⌦ ⌘ Z
Show code 
<Kbd keys="Mod+Shift+K" />
<Kbd keys="Ctrl+Alt+Delete" />
<Kbd keys="Mod+Z" />

Arrow keys

Direction tokens map to arrows on macOS glyphs.

↑ ↓ ← →
Show code 
<Kbd keys="Up" />
<Kbd keys="Down" />
<Kbd keys="Left" />
<Kbd keys="Right" />

Sizes

sm: ⌘ K md: ⌘ K
Show code 
<Kbd keys="Mod+K" size="sm" />
<Kbd keys="Mod+K" size="md" />

Props

PropTypeDefaultDescription
keys requiredstring—Key combo string with "+" separator, e.g. "Mod+Shift+K".
size 'sm' | 'md''sm'Key cap height aligned to Button `sm` / `md` (h-5.5 / h-7).
class string—Additional CSS classes.

Usage tips

  • Mod resolves to ⌘ on macOS and Ctrl on other platforms.
  • Keys are automatically uppercased and mapped to platform glyphs (e.g. ⇧ for Shift on Mac).
  • Pair with command palette items, menu labels, or tooltip descriptions to show shortcuts inline.