Keyboard

A keyboard-shortcut hint rendered inside a native <kbd> element, drawn as the key it names.

Navigation

Open the command menuCtrlK

Go to the inboxGI

Editing

Save the draftCtrlS

Undo the last changeCtrlShiftZ

Dismiss the editorEsc

View code

// The request already says which keyboard is in front of the reader, so the controller
// reads it once and hands the answer to the island.
let appleKeyboard = isAppleKeyboard(parse(request.headers.get("user-agent") ?? "").os.name);

<KeyboardShortcuts appleKeyboard={appleKeyboard} />

// …and inside the island, the glyphs are chosen with no lookup of its own:
<div>
	{GROUPS.map((group, index) => (
		<section key={group}>
			{index > 0 ? <Separator /> : null}
			<Header>{group}</Header>
			{SHORTCUTS.filter((shortcut) => shortcut.group === group).map((shortcut) => (
				<div key={shortcut.combo} mix={[hstack({ gap: 4, align: "baseline", justify: "between" })]}>
					<span>{shortcut.action}</span>
					<span mix={[hstack({ gap: 1, align: "baseline" })]}>
						{shortcutKeys(shortcut.combo, appleKeyboard).map((key) => (
							<Keyboard key={key}>{key}</Keyboard>
						))}
					</span>
				</div>
			))}
		</section>
	))}
</div>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { Keyboard } from "@sdxc/ui";

Renders its children inside a <kbd> element drawn as a key cap, whose inline-start auto margin pushes it to the trailing edge of whatever row it sits in — a menu item, a tooltip, a button.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Also accepts everything in TagProps<"kbd">.