Display
Kbd
Keycaps and key combinations.
Kbd renders keyboard keys in docs and hints. It shares the theme's cue-kbd style with the shortcut hints in buttons, menus and tooltips, so shortcuts look the same everywhere.
Preview
Search ⌘K
Command palette Ctrl+Shift+P
Close Esc
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/kbd.jsonThe CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/kbd.
Usage
import { Kbd, KbdGroup } from "@/components/ui/kbd";
<KbdGroup keys={["⌘", "K"]} />API reference
Kbd
A styled <kbd>.
KbdGroup
| Prop | Type | Default | Description |
|---|---|---|---|
| keys | string[] | — | Keys in order. |
| separator | ReactNode | — | Between keys, e.g. "+". |
Accessibility
- Uses semantic <kbd>, nested for combinations as the HTML spec describes.
FAQ
Also searched as: kbd component · keyboard shortcut display · keycap react · shadcn kbd