# CommandPalette

> The app's ⌘K command palette: a modal dialog the server fills with commands that act (links, buttons that submit a form or invoke a command, pages of further commands) and a small island that filters them by title and keywords, moves the active row, and remembers recent picks.

```ts
import { CommandPalette } from "@sdxc/ui/app";
```

Renders the palette: a modal dialog 640px wide, 15% from the top, full width less a gutter on
a phone. Without JavaScript a trigger still opens it and every command stays a working link
or button; the island adds filtering, arrow keys, pages and the ⌘K binding.

## Examples

```tsx
<CommandPalette id="palette" labels={labels} recent={["go-monitors"]}>
	<CommandPalette.Group heading="Navigation">
		<CommandPalette.Item id="go-monitors" title="Go to Monitors" href="/monitors" shortcut="g m" />
	</CommandPalette.Group>
</CommandPalette>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `id` | `string` | The dialog's `id`, which a trigger's `commandfor` names. |
| `labels` | `Labels` |  |
| `shortcut?` | `string` | The combo that toggles the palette from anywhere on the page. @default "mod+k" |
| `recent?` | `string[]` | Ids of commands to offer under Recent before anything is typed, most recent first. |
| `remember?` | `string` | A `localStorage` key under which the palette remembers the commands run from it. |
| `children` | `RemixNode` | CommandPalette.Groups, loose CommandPalette.Items and CommandPalette.Pages. |

Also accepts everything in `Omit<TagProps<"dialog">, "children">`.


### CommandPalette.Group

Renders a titled group of commands, hidden by the island while none of its commands match.

| Prop | Type | Description |
| --- | --- | --- |
| `heading` | `string` | Title Case heading, e.g. "Navigation". |
| `children` | `RemixNode` |  |

Also accepts everything in `TagProps<"div">`.


### CommandPalette.Item

Renders one 36px command row whose control is a link, a form submitter, an Invoker Command button, or a button opening a page.

| Prop | Type | Description |
| --- | --- | --- |
| `id` | `string` | A document-unique id, which `recent` and the remembered list name. |
| `title` | `string` | Title Case verb and noun, e.g. "Create Monitor". |
| `keywords?` | `string[]` | Other words that find it, e.g. aliases and the old name. |
| `description?` | `string` | A short muted line after the title. |
| `shortcut?` | `string` | A combo or sequence the item shows as a hint and binds on the page, e.g. `"g m"`. |
| `icon?` | `RemixNode` |  |
| `href?` | `string` | Makes the item a link. |
| `form?` | `string` | The `id` of a form the item submits. |
| `formaction?` | `string` |  |
| `formmethod?` | `"get" \| "post"` |  |
| `name?` | `string` | The submitted button's name and value. |
| `value?` | `string` |  |
| `command?` | `string` | An Invoker Command the item sends, e.g. `"--copy-account-id"`, to ItemProps.commandfor. |
| `commandfor?` | `string` |  |
| `page?` | `string` | The CommandPalette.Page the item opens. |
| `mix?` | `TagProps<"div">["mix"]` |  |


### CommandPalette.Page

Renders a nested page of commands, shown in place of the root list when an item opens it.

| Prop | Type | Description |
| --- | --- | --- |
| `id` | `string` | The id items open it by. |
| `title` | `string` | Shown beside the search field while the page is open. |
| `placeholder?` | `string` | Replaces the root placeholder while the page is open. |
| `children` | `RemixNode` |  |


### CommandPalette.Trigger

Renders the button that opens the palette, styled as a quiet search field with the key that opens it: one route for the pointer, and the place a reader learns the key.

| Prop | Type | Description |
| --- | --- | --- |
| `for` | `string` | The palette's `id`. |
| `shortcut?` | `string` | The combo the trigger advertises. @default "mod+k" |
| `children` | `RemixNode` |  |

Also accepts everything in `Omit<Button.Props, "commandfor" | "command">`.