Kbd

⌘K

Installation

npx paubha@latest add kbd

import { Kbd, KbdGroup } from "@/components/ui/kbd";

<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Esc

⌘⇧K

Search⌘K

Prop	Type	Default	Description
children	ReactNode	—	The key label, e.g. a letter, symbol, or word like "Esc".

Prop	Type	Default	Description
children	ReactNode	—	One or more Kbd elements. A decorative "+" is inserted between each.

Semantic element. Renders a native <kbd> element, which screen readers announce as the key name.
Decorative usage. When shown next to a menu item or tooltip purely as a hint (not the primary label), wrap the group in aria-hidden so it isn't announced twice. Expose the real shortcut on the control itself with aria-keyshortcuts.
Not interactive. Kbd is static text: no role, no tab stop, no focus state.
Separator. The "+" between keys in KbdGroup is decorative and marked aria-hidden.
Contrast. Uses fg-secondary on bg-secondary, which meets contrast requirements in both light and dark mode.

Use to display keyboard shortcuts: in tooltips, docs, or menu items. Shows a visual representation of key combinations.

Do:

Don't: