Data Display

Kbd

A styled keyboard key for documenting shortcuts.

stableNo JS requiredBuilt on <kbd>hydrateless/kbd.css

A styled keyboard key for documenting shortcuts, built on the native <kbd> element. CSS-only.

Kbd

Live

⌘ K

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-surface	Key background.
--hl-border	Key border and bottom edge.
--hl-radius-sm	Corner radius.

Accessibility

• Use real <kbd> elements so shortcuts are semantic, not just styled text.

Related

Command PaletteA filterable list of commands with keyboard navigation.TooltipA text hint shown on hover and focus.