Kbd
Kbd
Keyboard shortcut display — styled <kbd> element for showing key combinations
Installation
npx @ravikumarsurya/mdx-ui add kbdUsage
Press <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd> to open the search.Examples
Save file: Ctrl + S
Copy: ⌘ + C Paste: ⌘ + V
Open command palette: ⌘ + Shift + P
Single key
Press Esc to close the dialog.
Key combinations
Press Ctrl + K to open search.
Press ⌘ + Shift + P to open the command palette.
In a sentence
Use Tab to move between fields, and Enter to submit.
Hold Shift and click to select a range.
Common shortcuts
| Action | Shortcut |
|---|---|
| Save | ⌘ + S |
| Undo | ⌘ + Z |
| Copy | ⌘ + C |
| Find | ⌘ + F |
| Command palette | ⌘ + Shift + P |
Props
| Prop | Type | Description |
|---|---|---|
children | ReactNode | The key label |
className | string | Extra classes on the <kbd> element |