Kbd

Displays a keyboard key or key combination in a styled chip. Uses the semantic <kbd> HTML element for correct screen-reader pronunciation. Use KbdGroup to lay out multi-key combinations with consistent spacing.

Anatomy

<Kbd> renders a single key chip. KbdGroup wraps multiple Kbd elements in a flex row with a gap — use it for combinations like ⌘+K. Both accept standard className props.

⌘KEnterEsc
⌘K

KbdGroup

Examples

Common shortcuts

Open command palette⌘K
Save document⌘S
Copy selection⌘C
Undo⌘Z

Inline prose usage

Press Tab to move between fields and Enter to submit.

Use ⇧Tab to go backwards.

Hit Esc to dismiss any open modal or popover.

Zoom in with ⌘+ or out with ⌘-.

Design Guidelines

Do

  • Use for discoverability. Show shortcuts next to their action in menus and tooltips — users learn shortcuts by seeing them in context, not by reading a help page.
  • Use KbdGroup for multi-key combos. Wrap multiple Kbd chips in KbdGrouprather than putting the full string in one chip — it's semantically cleaner and visually consistent.
  • Use platform-appropriate symbols. Prefer ⌘ over "Ctrl" for Mac, and Ctrl for Windows — or detect the platform and show the right symbol.

Don't

  • Don't use Kbd for non-keyboard input. Kbd is for actual keyboard keys — don't use it for mouse clicks, touch gestures, or decorative badges.
  • Don't cram long combinations into one chip. <Kbd>⌘ + Shift + K</Kbd> is harder to read than three separate Kbd chips in a KbdGroup.
  • Don't show shortcuts users can't use. Only surface keyboard shortcuts for actions that are actually available in the current context.

Developer Reference

Accessibility

  • Kbd renders a <kbd>element — the correct semantic element for keyboard input. Screen readers may announce it differently (e.g. "Command K").
  • KbdGroup is a plain <div> with flex layout — it has no ARIA role. The individual <kbd> elements inside carry the semantics.
  • Both components accept all standard HTML props including className for custom sizing or color overrides.

Usage

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

// Single key
<Kbd>Enter</Kbd>
<Kbd>Esc</Kbd>
<Kbd>⌘</Kbd>

// Multi-key combination
<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

// Inline in prose
<p>
  Press <Kbd>Tab</Kbd> to move to the next field.
</p>

// In a shortcut table
<div className="flex items-center justify-between">
  <span>Open search</span>
  <KbdGroup>
    <Kbd>⌘</Kbd>
    <Kbd>K</Kbd>
  </KbdGroup>
</div>