KeyboardHelp

The keyboard cheat sheet ? opens.

View code

tsx

<Button commandfor="ops-keys" command="show-modal" variant="outline" color="neutral" size="sm">
	<KeyboardIcon size={16} />
	Keyboard shortcuts
	<Keyboard>?</Keyboard>
</Button>

<KeyboardHelp
	id="ops-keys"
	labels={{
		title: "Keyboard shortcuts",
		close: "Close",
		or: "or",
		open: "Show keyboard shortcuts",
		general: "General",
		other: "More",
	}}
	groups={[
		{
			title: "Navigation",
			shortcuts: [
				{ keys: "g m", label: "Go to Monitors" },
				{ keys: "g i", label: "Go to Incidents" },
				{ keys: "g s", label: "Go to Status Pages" },
			],
		},
		{
			title: "Monitors",
			shortcuts: [
				{ keys: ["j", "arrowdown"], label: "Next monitor" },
				{ keys: ["k", "arrowup"], label: "Previous monitor" },
				{ keys: ["o", "enter"], label: "Open monitor" },
				{ keys: "x", label: "Select monitor" },
				{ keys: "c", label: "Create monitor" },
			],
		},
		{
			title: "General",
			shortcuts: [
				{ keys: "mod+k", label: "Open command menu" },
				{ keys: "/", label: "Search monitors" },
			],
		},
	]}
/>

Demo apps

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

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

Terminal

npm add @sdxc/ui remix

typescript

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

Usage

typescript

import { KeyboardHelp } from "@sdxc/ui/app";

Renders the sheet: a modal dialog with its close control, heading, and one ShortcutList per group in columns at least 16rem wide. Open it with its key, or from a button with commandfor={id} command="show-modal"; load @sdxc/ui/app/keyboard-help in the browser entry.

Examples

Row navigation in a list

api.pulse.devUp84 ms
status.pulse.devUp112 ms
cdn.pulse.devDegraded640 ms
hooks.pulse.devDown—

Press j and k to move, x to select, Enter to open, / to search, ? for every key.

View code

tsx

let announcer = new Announcer({ hold: 1200 });

<Input id="monitor-search" type="search" aria-label="Search monitors" placeholder="Search monitors" />

<ul
	mix={[
		rowNavigation({
			search: "monitor-search",
			announcer,
			labels: {
				group: "Monitors",
				next: "Next monitor",
				previous: "Previous monitor",
				open: "Open monitor",
				toggle: "Select monitor",
				search: "Search monitors",
				selected: "Selected",
				deselected: "Deselected",
			},
		}),
	]}
>
	{monitors.map((monitor) => (
		<li key={monitor.id}>
			<input type="checkbox" data-selection-item name="monitor" value={monitor.id} aria-label={`Select ${monitor.name}`} />
			<a href={`/monitors/${monitor.id}`}>{monitor.name}</a>
			<span>{monitor.status}</span>
			<span>{monitor.latency}</span>
		</li>
	))}
</ul>

<div role="status" mix={[visuallyHidden()]}>{announcer.current?.text}</div>
<Button commandfor="list-keys" command="show-modal">Keyboard shortcuts</Button>
<KeyboardHelp id="list-keys" labels={labels} />

Props

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