Kbd

A visual component for displaying keyboard keys. Perfect for showing keyboard shortcuts, hotkeys, or key combinations in documentation and UI.

Installation

npx @zizigy/capsule add Kbd

Usage

Basic Kbd

<capsule-kbd>Ctrl</capsule-kbd>

Key Combinations

Display keyboard shortcuts by combining multiple keys:

Press + to copy

Press <capsule-kbd>Ctrl</capsule-kbd> + <capsule-kbd>C</capsule-kbd> to copy

Different Sizes

<capsule-kbd size="xs">XS</capsule-kbd>
<capsule-kbd size="sm">SM</capsule-kbd>
<capsule-kbd size="md">MD</capsule-kbd>
<capsule-kbd size="lg">LG</capsule-kbd>
<capsule-kbd size="xl">XL</capsule-kbd>

Common Keyboard Shortcuts

Save: +

Copy: +

Paste: +

Undo: +

Search: +

<div>Save: <capsule-kbd>Ctrl</capsule-kbd> + <capsule-kbd>S</capsule-kbd></div>
<div>Copy: <capsule-kbd>Ctrl</capsule-kbd> + <capsule-kbd>C</capsule-kbd></div>

Arrow Keys

Use to navigate

Use <capsule-kbd>↑</capsule-kbd> <capsule-kbd>↓</capsule-kbd>
<capsule-kbd>←</capsule-kbd> <capsule-kbd>→</capsule-kbd> to navigate

Function Keys

<capsule-kbd>F1</capsule-kbd>
<capsule-kbd>F2</capsule-kbd>
<capsule-kbd>F3</capsule-kbd>

API

Properties

Property	Type	Default	Description
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Size of the keyboard key

Styling

You can customize the appearance using CSS:

capsule-kbd {
  background: #f0f0f0;
  border-color: #ccc;
  font-size: 14px;
}