Kbd
A keycap for displaying keyboard shortcuts.
Overview
Kbd renders a single keycap on a surface-container chip; KbdGroup lays
out a key sequence (e.g. ⌘ + K) with consistent spacing. Inside a Tooltip
the cap automatically switches to a translucent tint that stays legible on the
inverse tooltip surface.
⌘K
$ npx morpha-ui add kbdExamples
In text
Use Ctrl+B to toggle the sidebar
Press Esc to close the dialog
Inside a tooltip
Installation
Morpha UI components are distributed via the Morpha CLI: npx morpha-ui add kbd. In the meantime, since this is the base shadcn component, you can also
add it directly:
npx shadcn@latest add kbdAPI Reference
Prop
Type
Accessibility
- The
<kbd>element is announced as keyboard input by assistive tech — no extra ARIA needed. - Don't rely on the keycap alone to communicate a shortcut: keep the action reachable through a visible control too.