buttonsBeginner

Keyboard Shortcut Display

Styled keyboard-key chips for showing shortcuts inline.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a keyboard-shortcut display block: a card with a small uppercase title and a vertical list of rows, each row showing an action label on the left and a kbd-key cluster on the right. Style <kbd> elements as raised key caps using a subtle gradient (slightly lighter top, darker bottom), a 2px-bottom border, soft inset highlight, and monospace font. Cluster keys with '+' separators (e.g. ⌘+K).

Code

html

<!--
  Source: Vibedex
  https://vibedex.io
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/kbd-shortcuts
-->
<section>
  <h2>Keyboard shortcuts</h2>
  <ul>
    <li><span>Open palette</span><div><kbd>⌘</kbd>+<kbd>K</kbd></div></li>
    <li><span>New component</span><div><kbd>N</kbd></div></li>
    <li><span>Search</span><div><kbd>/</kbd></div></li>
    <li><span>Toggle theme</span><div><kbd>⌘</kbd>+<kbd>⇧</kbd>+<kbd>L</kbd></div></li>
  </ul>
</section>