Keyboard shortcut tooltip
Shows the action plus its shortcut, and the key dips slightly as if someone had just pressed it.
Settings
Code
<button class="uv-tk">Search<span>Search this page<kbd>⌘ K</kbd></span></button>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Tooltips
Where to use it
Handy wherever people live on the keyboard: the search button of a documentation site, the “Send” button of an email client, the export action in a design app. Hover and the label fades in with a ⌘ K key that gives a little press. A keyboard shortcut tooltip teaches shortcuts without anyone opening a help page.
Show the right key for each system: ⌘ on Mac, Ctrl on Windows, which a couple of lines of JavaScript can swap. And only add it to actions that really have a shortcut. If people try it and nothing happens, they stop trusting the hints.