Cognition

Components

Keyboard Input

Used to display textual user input from the keyboard. Use it for shortcut hints and key references — not for general inline code.

Proposed. fe-distillery has no Kbd primitive yet. This documents the canonical one, built on the semantic <kbd> element.

Preview

⌘K

Rendered with live Cognition tokens — the muted surface and text remap on theme change, no dark: classes.

Examples

⇧⌘P
Single keys
Ctrl+B
Combo

Press Esc to close

In a sentence

A single key uses Kbd; a sequence wraps them in KbdGroup for even spacing. Each key is at least square (min-w-5) so K and Esc sit consistently.

API

Part
Description
Kbd
A single key cap — wrap a key name or symbol (⌘, Shift, Enter).
KbdGroup
Groups multiple Kbd keys into one shortcut, with consistent spacing.

Don't and Do

Don't

Don't use Kbd for inline code, file names, or values — that's a <code>. Reserve it for actual keystrokes.

Do
<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>
import { Kbd, KbdGroup } from "@/components/ui/kbd";

export function CommandHint() {
  return (
    <KbdGroup>
      <Kbd>⌘</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  );
}

Drop-in ready. Renders a real <kbd> element, so it's semantic and screen-reader friendly.

Proposed canonical component — fe-distillery has no kbd primitive yet. Built on the semantic <kbd> element with the muted surface mapped to the Cognition background-secondary token.