Shadcn.io is not affiliated with official shadcn/ui
Tooltip with Keyboard Shortcut
A tooltip showing keyboard shortcut with Kbd component using flex items-center gap-2 layout displaying command key combinations
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.
Tooltip with Keyboard Shortcut preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
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
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