# ShortcutList

> The list a keyboard-shortcuts panel shows: a native `<dl>` pairing each action with the key caps that run it, laid out in two columns so every key lands on one vertical line and the list reads down that line instead of across ragged hints.

```ts
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.

## Examples

```tsx
<ShortcutList>
	<ShortcutList.Item keys={keyComboGlyphs("mod+k", apple)}>{t("openSearch")}</ShortcutList.Item>
	<ShortcutList.Item keys={["?"]}>{t("showShortcuts")}</ShortcutList.Item>
</ShortcutList>
```

## Props

| 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

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

| 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">`.