Kbd

Renders keyboard key labels with a monospaced style matching OS conventions.

Default

Individual key labels.

KEnter
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
<Kbd>Enter</Kbd>

Combinations

Compose multiple Kbd elements with plain text to represent keyboard shortcuts.

+K
Ctrl+Shift+P
<Kbd>⌘</Kbd> + <Kbd>K</Kbd>

<Kbd>Ctrl</Kbd> + <Kbd>Shift</Kbd> + <Kbd>P</Kbd>

Props

PropTypeDefaultDescription
childrenReactNodeKey label or content
classNamestring''Additional Tailwind classes