Keyboard

Display keyboard keys with platform-specific styling for Windows and macOS.

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:

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

Renders as: ⌘ + C

Automatic Symbol Rendering

The component automatically renders appropriate symbols based on the platform:

tsx
{/* 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:

tsx
<Kbd show="custom" />

Renders as: custom

Arrow Key

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

Render as: ↑ ↓ ← →

Props

Prop	Type	Default	Description
`show`	string	(required)	The key identifier (e.g., 'cmd', 'ctrl', 'a')
`type`	string	`window`	for device type `mac` or `window`	Platform style or custom content

Supported Keys

The component includes special handling for common keys:

Key Name	Windows	macOS
command/cmd	`Win`	`⌘`
option/alt	`Alt`	`⌥`
shift	`Shift`	`⇧`
ctrl/control	`Ctrl`	`⌃`
tab	`Tab`	`⇥`
enter/return	`Enter`	`⏎`
delete	`Del`	`⌫`
escape/esc	`Esc`	`⎋`
up/down/left/right	`↑` `↓` `←` `→`	`↑` `↓` `←` `→`
space	`Space`	`␣`

Best Practices

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