Key caps
StableKeyboard keys cut from the same metal as the buttons, and shortcuts written as key caps.
Kbd draws one key; KeyCombo turns a shortcut string into caps for the visitor’s keyboard (“mod+k” is ⌘ K on a Mac and Ctrl K elsewhere) and can show a two-step sequence with “then”.
Updated View source
Shortcuts
import { Kbd, KeyCombo } from '@rchursin/product/ui'
/** Key caps cut from the same metal as the buttons. "mod" becomes ⌘ or Ctrl for the visitor. */export default function KeyCombos() { return ( <dl className="grid grid-cols-[auto_1fr] items-center gap-x-6 gap-y-3 text-[13px]"> <dt> <KeyCombo combo="mod+k" /> </dt> <dd className="text-fg-2">Open search</dd> <dt> <KeyCombo combo="g" then="i" /> </dt> <dd className="text-fg-2">Go to inbox</dd> <dt> <KeyCombo combo="shift+enter" /> </dt> <dd className="text-fg-2">New line</dd> <dt> <Kbd>Esc</Kbd> </dt> <dd className="text-fg-2">Close</dd> </dl> )}Usage
import { Kbd, KeyCombo } from '@rchursin/product/ui'<KeyCombo combo="mod+k" /> <KeyCombo combo="g" then="i" />API
KeyCombo props
| Prop | Type | Default | Description |
|---|---|---|---|
comborequired | string | – | Keys joined with “+”: mod, shift, alt, enter, esc, space, up, down, left, right, backspace, delete, pageup, pagedown, or any single character. |
then | string | – | A second step for sequences like G then I. |
className | string | – | Extra classes on the wrapper. |
CSS
| Class or variable | What it does |
|---|---|
rc-kbd | The key cap finish, usable on any <kbd> element. |
Accessibility
- Keys render as <kbd> elements. In KeyCombo, symbol caps (⌘ ⇧ ⌥ ↵ and the arrows) carry a visually hidden name, so a screen reader says “Command K”, not the symbol’s Unicode name. Kbd on its own shows exactly what you pass it, so write words (“Esc”) rather than symbols there.
- The page renders “Ctrl” first and switches to ⌘ right after loading on Apple devices, so prerendered pages never mismatch.
In use
Used on this site
Source
The component’s own files, exactly as they run on this site.