Kbd

Ready

Display keyboard shortcuts with platform-specific symbols and visual styling

Interactive Preview

Keyboard shortcuts with automatic symbol rendering

Single key:
Key combination:+⇧+p
Multiple keys:Ctrl++Del

Common Shortcuts

Frequently used keyboard shortcuts

Save+s
Copy+c
Paste+v
Undo+z
Redo+⇧+z
Find+f

Arrow & Special Keys

Special keys automatically render with icons or symbols

Move up
Move down
Move left
Move right
Confirm
CancelEsc
Next field⇥
Delete

Sizes

Three size options: sm, md, and lg

Small

+k

Medium (default)

+k

Large

+k

Variants

Three visual styles: default, outline, and subtle

Default

+k

Outline

+k

Subtle

+k

In Context

Keyboard shortcuts displayed in documentation and UI hints

Press +k to open the command palette.

Use ⇥ and ⇧+⇥ to navigate between fields.

Press Esc to close this dialog or to confirm.

Navigate with arrow keys:

Supported Key Names

All supported key names for the component

Modifiers
  • cmd
  • ctrl
  • alt / option
  • shift
Arrows
  • up
  • down
  • left
  • right
Special
  • enter
  • esc / escape
  • tab
  • backspace
  • delete
  • space

Usage

How to use the Kbd component

// Single key
<Kbd>Enter</Kbd>
// Key combination
<Kbd keys={['cmd', 'k']} />
// In text
<p>Press <Kbd keys={['cmd', 's']} /> to save</p>
// With size and variant
<Kbd keys={['ctrl', 'alt', 'delete']} size="lg" variant="subtle" />

API Reference

Props

keys-string[] - Array of key names for combination
children-string - Single key name (alternative to keys)
size-"sm" | "md" | "lg" (default: "md")
variant-"default" | "outline" | "subtle" (default: "default")
className-string - Additional CSS classes

Features

  • •Platform-specific symbols (⌘ for Cmd, ⌥ for Alt, etc.)
  • •Automatic icon rendering for arrow keys, Enter, Escape
  • •Support for key combinations with + separator
  • •Three size options: sm, md, lg
  • •Three style variants: default, outline, subtle
  • •Inline text usage with proper spacing
  • •Semantic kbd HTML element for accessibility