Components

Kbd

Displays a keyboard key or shortcut hint, rendering the semantic <kbd> element so shortcuts read correctly to assistive technology.

Basic usage

Wrap a single key in Kbd to hint a shortcut inline.

Press Esc to close the dialog.

Key combinations

Use KbdGroup to space a multi-key chord like Ctrl K evenly.

CtrlK

Shortcut list

Symbol glyphs such as ⌘ and ⇧ sit comfortably alongside word keys in a shortcut reference.

Open command menu
⌘K
Save changes
CtrlS
Toggle sidebar
⌘⇧B

Props

Both Kbd and KbdGroup are presentational wrappers — they expose only their native element props.

PropTypeDefaultDescription
classNamestring—Additional Tailwind classes to merge onto the rendered element.
...restReact.ComponentProps<'kbd'> | React.ComponentProps<'div'>—All native attributes are forwarded — Kbd to the <kbd> element, KbdGroup to its wrapper.

Accessibility

  • Kbd renders a native <kbd> element, conveying “keyboard input” semantics to screen readers and other assistive technology.
  • It is marked pointer-events-none and select-none — purely a visual hint that never steals focus or interferes with the interactive element it labels.
  • Prefer plain text for symbol keys (⌘, ⇧) so they are announced, and reserve embedded icons for cases where a glyph is unavailable.
  • When a hint duplicates a real shortcut, ensure the underlying control actually responds to that key binding so the visual and behavioral contract stay in sync.