Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Tooltip with Keyboard Shortcut
A tooltip showing keyboard shortcut with Kbd component using flex items-center gap-2 layout displaying command key combinations
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Power users love keyboard shortcuts—but discovering them is the challenge. This React tooltip pattern displays keyboard shortcuts using the Kbd component with flex items-center layout for action labels. Built with shadcn/ui Tooltip, Kbd, and Radix UI primitives with text-primary-foreground styling, the shortcut display teaches efficiency—perfect for save actions, navigation commands, editor controls, formatting shortcuts, search triggers, or any interface with keyboard commands where showing shortcuts on hover educates users about faster workflows without cluttering the interface with always-visible hotkey labels.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Basic Tooltip
Simple single-line tooltip text
Tooltip with Title
Tooltip with structured title and description
Tooltip with Icon
Tooltip containing icon and text
Keyboard Key
Kbd component for key display
Command Palette
Keyboard-driven command interface
Button with Shortcut
Button showing keyboard shortcut
Questions you might have
React Tooltip with Icon
A tooltip with icon and text content using flex items-center gap-2 layout with CheckCircleIcon from Lucide React for status indicators
React Tooltip with Image
A tooltip with image preview showing 257x150px thumbnail with title and description using max-w-xs and p-0 for edge-to-edge image display