Core Elements
Kbd
Displays a keyboard key or shortcut, e.g. inside a search input.
Usage
Installation
npx wunderui-cli add kbdWrites the source into your project with its dependencies and, on first use, the styles — see Installation.
Then import what you need:
import { Kbd, KbdGroup } from "@/components/ui/kbd"Examples
Single key
One shortcut on its own.
Combination
Several keys joined with +.
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Keyboard shortcuts panel
A list of actions with their keyboard shortcuts.