Kbd is a pretty display for gorgeous keyboard shortcuts. It is a standalone component that can be customized for size and used for single keys or combinations.
A simple keyboard shortcut display using the Kbd component.
Kbd is a standalone component.
The Kbd component renders a stylized keyboard key or shortcut. It supports size customization via boolean props or a size string prop.
| Kbd Props | Type | Description |
|---|---|---|
size | string | Sets the size to one of the following: |
| xl | boolean | Sets the size to |
| lg | boolean | Sets the size to |
| md | boolean | Sets the size to |
| sm | boolean | Sets the size to |
| xs | boolean | Sets the size to |
| Kbd Slots | Description |
|---|---|
default | The default slot. Content to be displayed inside the keyboard key (e.g., a letter, word, or icon). |
Kbd supports size via boolean props or the size prop.
Kbd can be used to show arrow keys and can be combined for custom layouts.