Kbd Shortcuts
Keycap and key-combo components with a Mac/Windows symbol map, shown as a shortcut cheatsheet.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
KbdProps
Also accepts all props of React.ComponentProps<"kbd">
| Prop | Type | Default | Description |
|---|---|---|---|
| keyName | string | — | A key token such as "mod", "shift", "enter" or a literal like "K". Falls back to children. |
| platform | KbdPlatform | "mac" | — |
KbdGroupProps
Also accepts all props of Omit<React.ComponentProps<"span">, "children">
| Prop | Type | Default | Description |
|---|---|---|---|
| keys* required | string[] | — | Combo as key tokens, e.g. ["mod", "K"] |
| platform | KbdPlatform | "mac" | — |
| separator | boolean | — | Show "+" between keys (the Mac style is usually joined without it) |
Install
$ npx shadcn@latest add https://chromotion.dev/r/kbd.json