Kbd

Displays keyboard input that triggers an action in the application.

Default

Enter

Single Keys

Display individual keyboard keys.

Single Keys

Esc Tab Space Enter Backspace

Key Combinations

Combine multiple kbd elements with a separator for keyboard shortcuts.

Combinations

Ctrl + C Copy

Ctrl + V Paste

Ctrl + Shift + Z Redo

Mac Shortcuts

Use special characters for Mac modifier keys.

Mac Shortcuts

⌘ + K Command palette

⌘ + S Save

⌥ + ⇧ + F Format

Arrow Keys

Display navigation keys.

Arrow Keys

↑ ↓ ← →

In Context

Use kbd elements inline with text to describe shortcuts.

In Context

Press ⌘ K to open the command palette.

Use ↑ and ↓ to navigate, Enter to select.

Press Esc to close.

Shortcut List

A common pattern for displaying a list of keyboard shortcuts.

Shortcut List

⌘ K

New file

⌘ N

Settings

⌘ ,

    <div class="rounded-lg border divide-y">
  <div class="flex items-center justify-between px-4 py-3">
    <span>Search</span>
    <div><.kbd>⌘</.kbd><.kbd>K</.kbd></div>
  </div>
  <div class="flex items-center justify-between px-4 py-3">
    <span>New file</span>
    <div><.kbd>⌘</.kbd><.kbd>N</.kbd></div>
  </div>
</div>
  