KBD

Renders keyboard keys in a styled badge. Compose multiple Kbd elements with + separators to show keyboard shortcuts.

Basic

A single key.

Sizes

Five sizes: xs, sm, md (default), lg, xl.

In text

Use size="sm" to match surrounding body text height.

Key combinations

Combine keys with + separators for shortcuts.

Function & modifier keys

Unicode symbols for macOS modifier keys.

Full keyboard

All keys rendered in a staggered QWERTY layout.

Arrow keys

WASD / arrow key cluster layout.

Shortcut reference

Common use case: a help panel listing keyboard shortcuts.