<div class="kbd-examples">
  <!-- Single key -->
  <kbd class="kbd">⌘</kbd>
  <kbd class="kbd">K</kbd>

  <!-- Combo -->
  <div class="kbd-combo">
    <kbd class="kbd">⌘</kbd>
    <span class="kbd-plus">+</span>
    <kbd class="kbd">Shift</kbd>
    <span class="kbd-plus">+</span>
    <kbd class="kbd">P</kbd>
  </div>

  <!-- In context -->
  <div class="kbd-hint">
    <span>Open command palette</span>
    <div class="kbd-combo">
      <kbd class="kbd">⌘</kbd>
      <span class="kbd-plus">+</span>
      <kbd class="kbd">K</kbd>
    </div>
  </div>
</div>

<style>
.kbd-examples { display: flex; flex-direction: column; gap: 1rem; }
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.2rem 0.5rem; min-width: 1.75rem;
  border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 0.375rem; background: var(--surface);
  font-size: 0.75rem; font-family: inherit; font-weight: 500;
  color: var(--muted); box-shadow: 0 1px 0 var(--border);
}
.kbd-combo { display: inline-flex; align-items: center; gap: 0.25rem; }
.kbd-plus { font-size: 0.75rem; color: var(--muted); }
.kbd-hint {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.625rem 0.875rem; border: 1px solid var(--border);
  border-radius: 0.5rem; font-size: 0.875rem;
}
</style>