Keyboard

The Keyboard component automatically renders platform-appropriate key symbols for macOS and Windows. It's perfect for documenting keyboard shortcuts in your application.

Usage

Basic Usage

Simply use the Kbd component with a show prop:

<Kbd show="cmd" type="mac" /> + <Kbd show="c" />

Renders as: ⌘ + C

Automatic Symbol Rendering

The component automatically renders appropriate symbols based on the platform:

{/* Windows style (default) */}
<Kbd show="ctrl" /> + <Kbd show="v" />

{/* Mac style */}
<Kbd show="cmd" type="mac" /> + <Kbd show="v" type="mac" />

Renders as:

• Windows: Ctrl + V
• Mac: ⌘ + v

Custom Content

For custom key labels, provide children:

<Kbd show="custom">Custom</Kbd>

Renders as: Custom

Props

Supported Keys

The component includes special handling for common keys:

Examples

Common Shortcuts

{/* Copy shortcut */}
<Kbd show="ctrl" /> + <Kbd show="c" />

{/* Paste shortcut */}
<Kbd show="cmd" type="mac" /> + <Kbd show="v" type="mac" />

{/* Save shortcut */}
<Kbd show="ctrl" /> + <Kbd show="s" />

Custom Key Combinations

{/* Custom application shortcut */}
<Kbd show="cmd" type="mac" /> + <Kbd show="option" type="mac" /> + <Kbd show="a" type="mac"/>

Render as: ⌘ + ⌥ + a

Arrow Key

<Kbd show="up" /> <Kbd show="down" /> <Kbd show="left" /> <Kbd show="right" />

Render as: ↑ ↓ ← →

Best Practices

1. Be Consistent: Stick to one platform style within the same context
2. Use Type Wisely:
   • Use type="mac" for Mac-specific documentation
   • Use type="window" (default) for Windows/Linux
3. Accessibility: The component uses semantic <kbd> HTML for better accessibility

Notes

• The component automatically capitalizes single letters (e.g., 'a' becomes 'A')
• Unrecognized keys are displayed as-is
• Dark mode is automatically supported through Tailwind's dark mode classes