Keyboard Key

Fetch pattern JSON: curl https://webspire.de/patterns/kbd/base.json

base.html

<div class="ws-kbd space-y-4 p-6 text-sm leading-relaxed" style="color: var(--ws-color-text-soft);">
  <p>
    Press <kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">Ctrl</kbd>
    +
    <kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">K</kbd>
    to open the command palette.
  </p>
  <p>
    Use <kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">Tab</kbd>
    to move focus and
    <kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">Enter</kbd>
    to confirm. Press
    <kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">Esc</kbd>
    to cancel.
  </p>
  <p>
    To undo, press
    <kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">Ctrl</kbd>
    +
    <kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">Z</kbd>.
    To redo, press
    <kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">Ctrl</kbd>
    +
    <kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">Shift</kbd>
    +
    <kbd class="inline-flex items-center rounded-lg border border-[var(--ws-kbd-border)] bg-[var(--ws-kbd-bg)] px-2 py-0.5 font-mono text-xs font-medium text-[var(--ws-kbd-text)] shadow-[0_2px_0_0] shadow-[var(--ws-kbd-border)]">Z</kbd>.
  </p>
</div>

Details

Family

kbd

Tier

base

Kind

component

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

kbdkeyboardkeyshortcutinput

Slots

Name	Required	Description
key	Yes	The key label text inside the kbd element.

Semantic <kbd> elements styled to resemble physical keyboard keys with border, shadow depth, and rounded corners. Dark mode compatible.