KbdShortcutChip [pattern] v1.0.0

Render keyboard shortcuts as an array of individual elements (one chip per key, split on spaces) rather than a single blob — the space-delimited shortcut string convention from cmdk's Raycast demo enables per-key chip visuals, clean copy-paste, and single-point platform swapping (⌘ → Ctrl).

Implementation

// Shortcut string convention: space-delimited keys
// '⌘ K' → ['⌘', 'K']  |  '⌘ ⇧ F' → ['⌘', '⇧', 'F']  |  '↵' → ['↵']

function KbdShortcut({ shortcut }: { shortcut: string }) {
return (
<span className="shortcut-chips" aria-label={shortcut}>
{shortcut.split(' ').map((key) => (
<kbd key={key}>{key}</kbd>
))}
</span>
);
}

// Platform adapter — call at data layer, not in component
function formatShortcut(raw: string, platform: 'mac' | 'win' | 'linux'): string {
if (platform !== 'mac') {
return raw
.replace('⌘', 'Ctrl')
.replace('⌥', 'Alt')
.replace('⇧', 'Shift');
}
return raw;
}

// Usage in a command palette item
<Command.Item>
Show in Finder
<KbdShortcut shortcut={formatShortcut('⌘ ↵', platform)} />
</Command.Item>

Css

kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.25rem;
height: 1.25rem;
padding: 0 0.25rem;
border: 1px solid oklch(80% 0 0);
border-radius: 4px;
background: oklch(97% 0 0);
color: oklch(40% 0 0);
font-family: var(--font-mono);
font-size: 0.6875rem; /* 11px */
line-height: 1;
box-shadow: 0 1px 0 oklch(80% 0 0); /* key depth */
}

.shortcut-chips {
display: inline-flex;
gap: 2px;
align-items: center;
}

Gotchas

• The aria-label on the wrapper provides the full shortcut text for screen readers; individual chips are read as separate characters without it.
• e.preventDefault() is critical in global keydown listeners for Cmd+K — without it, some Chromium builds focus the URL bar simultaneously.
• When closing a popover triggered by a shortcut, onCloseAutoFocus must return focus to the command palette input — otherwise focus falls to the trigger button and keyboard flow breaks.
• Empty string '' shortcut prop will render no chips — guard with: if (!shortcut) return null.

KbdShortcutChip [pattern] v1.0.0

Render keyboard shortcuts as an array of individual elements (one chip per key, split on spaces) rather than a single blob — the space-delimited shortcut string convention from cmdk's Raycast demo enables per-key chip visuals, clean copy-paste, and single-point platform swapping (⌘ → Ctrl).

Implementation

// Shortcut string convention: space-delimited keys
// '⌘ K' → ['⌘', 'K']  |  '⌘ ⇧ F' → ['⌘', '⇧', 'F']  |  '↵' → ['↵']

function KbdShortcut({ shortcut }: { shortcut: string }) {
return (
<span className="shortcut-chips" aria-label={shortcut}>
{shortcut.split(' ').map((key) => (
<kbd key={key}>{key}</kbd>
))}
</span>
);
}

// Platform adapter — call at data layer, not in component
function formatShortcut(raw: string, platform: 'mac' | 'win' | 'linux'): string {
if (platform !== 'mac') {
return raw
.replace('⌘', 'Ctrl')
.replace('⌥', 'Alt')
.replace('⇧', 'Shift');
}
return raw;
}

// Usage in a command palette item
<Command.Item>
Show in Finder
<KbdShortcut shortcut={formatShortcut('⌘ ↵', platform)} />
</Command.Item>

Css

kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.25rem;
height: 1.25rem;
padding: 0 0.25rem;
border: 1px solid oklch(80% 0 0);
border-radius: 4px;
background: oklch(97% 0 0);
color: oklch(40% 0 0);
font-family: var(--font-mono);
font-size: 0.6875rem; /* 11px */
line-height: 1;
box-shadow: 0 1px 0 oklch(80% 0 0); /* key depth */
}

.shortcut-chips {
display: inline-flex;
gap: 2px;
align-items: center;
}

Gotchas

• The aria-label on the wrapper provides the full shortcut text for screen readers; individual chips are read as separate characters without it.
• e.preventDefault() is critical in global keydown listeners for Cmd+K — without it, some Chromium builds focus the URL bar simultaneously.
• When closing a popover triggered by a shortcut, onCloseAutoFocus must return focus to the command palette input — otherwise focus falls to the trigger button and keyboard flow breaks.
• Empty string '' shortcut prop will render no chips — guard with: if (!shortcut) return null.

Rationale

Rendering '⌘ ⇧ F' as three separate chips gives each key its own boxed visual, matches how shortcut hints appear in Linear, Raycast, Arc, and Notion, and makes platform adaptation trivial — swap modifier symbols in the data string, not in component logic.

Implementation

// Shortcut string convention: space-delimited keys
// '⌘ K' → ['⌘', 'K']  |  '⌘ ⇧ F' → ['⌘', '⇧', 'F']  |  '↵' → ['↵']

function KbdShortcut({ shortcut }: { shortcut: string }) {
return (
<span className="shortcut-chips" aria-label={shortcut}>
{shortcut.split(' ').map((key) => (
<kbd key={key}>{key}</kbd>
))}
</span>
);
}

// Platform adapter — call at data layer, not in component
function formatShortcut(raw: string, platform: 'mac' | 'win' | 'linux'): string {
if (platform !== 'mac') {
return raw
.replace('⌘', 'Ctrl')
.replace('⌥', 'Alt')
.replace('⇧', 'Shift');
}
return raw;
}

// Usage in a command palette item
<Command.Item>
Show in Finder
<KbdShortcut shortcut={formatShortcut('⌘ ↵', platform)} />
</Command.Item>

Css

kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.25rem;
height: 1.25rem;
padding: 0 0.25rem;
border: 1px solid oklch(80% 0 0);
border-radius: 4px;
background: oklch(97% 0 0);
color: oklch(40% 0 0);
font-family: var(--font-mono);
font-size: 0.6875rem; /* 11px */
line-height: 1;
box-shadow: 0 1px 0 oklch(80% 0 0); /* key depth */
}

.shortcut-chips {
display: inline-flex;
gap: 2px;
align-items: center;
}

Gotchas

• The aria-label on the wrapper provides the full shortcut text for screen readers; individual chips are read as separate characters without it.
• e.preventDefault() is critical in global keydown listeners for Cmd+K — without it, some Chromium builds focus the URL bar simultaneously.
• When closing a popover triggered by a shortcut, onCloseAutoFocus must return focus to the command palette input — otherwise focus falls to the trigger button and keyboard flow breaks.
• Empty string '' shortcut prop will render no chips — guard with: if (!shortcut) return null.