Kbd — Cider UI

Selectors

kbd: Auto-styled keyboard shortcut within .cider scope.

Keys

A Enter Shift Tab Esc Space ⌘ ⌥ ⌃ ⇧ ← ↑ → ↓ ⌫ ⏎

HTML

<div class="flex flex-wrap items-center gap-3">
  <kbd>A</kbd>
  <kbd>Enter</kbd>
  <kbd>Shift</kbd>
  <kbd>Tab</kbd>
  <kbd>Esc</kbd>
  <kbd>Space</kbd>
  <kbd>&#8984;</kbd>
  <kbd>&#8997;</kbd>
  <kbd>&#8963;</kbd>
  <kbd>&#x21E7;</kbd>
  <kbd>&#x2190;</kbd>
  <kbd>&#x2191;</kbd>
  <kbd>&#x2192;</kbd>
  <kbd>&#x2193;</kbd>
  <kbd>&#x232B;</kbd>
  <kbd>&#x23CE;</kbd>
</div>

Shortcuts

Copy ⌘ + C

Paste ⌘ + V

Save ⌘ + S

Screenshot ⌘ + ⇧ + 4

HTML

<div class="space-y-3">
  <div class="flex items-center gap-2">
    <span class="text-sm text-tertiary-foreground w-24">Copy</span>
    <kbd>&#8984;</kbd> + <kbd>C</kbd>
  </div>
  <div class="flex items-center gap-2">
    <span class="text-sm text-tertiary-foreground w-24">Paste</span>
    <kbd>&#8984;</kbd> + <kbd>V</kbd>
  </div>
  <div class="flex items-center gap-2">
    <span class="text-sm text-tertiary-foreground w-24">Save</span>
    <kbd>&#8984;</kbd> + <kbd>S</kbd>
  </div>
  <div class="flex items-center gap-2">
    <span class="text-sm text-tertiary-foreground w-24">Screenshot</span>
    <kbd>&#8984;</kbd> + <kbd>&#x21E7;</kbd> + <kbd>4</kbd>
  </div>
</div>

Inline

Press ⌘ + S to save your document. Use ⌘ + ⇧ + P to open the command palette.

HTML

<p class="text-sm">Press <kbd>&#8984;</kbd> + <kbd>S</kbd> to save your document. Use <kbd>&#8984;</kbd> + <kbd>&#x21E7;</kbd> + <kbd>P</kbd> to open the command palette.</p>