[ @sdxc/ui ]

ShortcutList

The list a keyboard-shortcuts panel shows.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

Installation

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

npm add @sdxc/ui remix

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

Usage

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

Renders the list's host <dl>, a two-column grid whose first column takes the actions and whose second sizes itself to the widest run of caps.

Composition

The parts the component publishes, each a static property of the host.

ShortcutList
ShortcutList.ItemRenders one binding as a <dt> naming the action and a <dd> holding a cap per key.

Examples

Shortcuts panel

Open search: CtrlK
Save the draft: CtrlS
Show keyboard shortcuts: ?

View code

<ShortcutList mix={[is("18rem")]}>
	<ShortcutList.Item keys={keyComboGlyphs("mod+k", appleKeyboard)}>Open search</ShortcutList.Item>
	<ShortcutList.Item keys={keyComboGlyphs("mod+s", appleKeyboard)}>Save the draft</ShortcutList.Item>
	<ShortcutList.Item keys={["?"]}>Show keyboard shortcuts</ShortcutList.Item>
</ShortcutList>

Props

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

Prop	Type	Description
`children`	`RemixNode`	One ShortcutList.Item per binding, in the order the panel lists them.

Also accepts everything in TagProps<"dl">.

ShortcutList.Item

Prop	Type	Description
`keys`	`string[]`	The caps to press, in press order, each already the glyph to print — a combo formatted for the reader's keyboard by `keyComboGlyphs()`, or a bare character.
`children`	`RemixNode`	What pressing the keys does.

Also accepts everything in TagProps<"div">.