Kbds

Usage and anatomy

Kbd renders a keyboard input or shortcut key. Use one Kbd for each physical key and place separators such as + outside the component.

import { Kbd } from "@acme/ui/kbd"

<p>
  Press <Kbd>⌘</Kbd> + <Kbd>K</Kbd> to open the command menu.
</p>

Prefer the key label users see on their keyboard, and include an accessible text instruction around the shortcut.

API reference

Kbd

Kbd also accepts native keyboard element props.