Update v4.2 - New components, 10+ framework guides, and quality improvements. Visit Changelog

Tailwind CSS KBD (Keyboard)

Display keyboard shortcuts and key labels with Tailwind CSS kbd styles, icons, and size variants.

Types

Common KBD styles, from plain inline text to bordered keycap variants.

Working with icons

Use icons inside keycaps to represent non-text keys such as arrows and command keys.

Working with modifiers

Combine multiple KBD elements to display keyboard shortcuts with modifier keys.

Sizes

Display KBD elements in small, default, and large sizes.

Input example

Show shortcut hints inside an input to surface keyboard commands such as Command + /.

List group example

Display keyboard shortcuts alongside list items for quick reference.

© 2026 Preline Labs.