---
title: CommandPalette
description: Search grouped commands and navigation targets from an inline surface.
package: moraine
version: 0.6.0
repository: https://github.com/subframe7536/moraine
---
# CommandPalette
> Search grouped commands and navigation targets from an inline surface.
Use CommandPalette for searchable commands or navigation targets. The application decides when to open it and registers any global shortcut.
## Basic usage
```tsx
import { CommandPalette } from 'moraine'
export function Example() {
return (
)
}
```
## Anatomy
```text
CommandPalette [component; slot=root]
├── inputWrapper [slot]
│ ├── inputLeading [slot]
│ ├── input [slot]
│ └── close [slot]
├── listbox [slot]
│ ├── group [slot]
│ │ ├── groupLabel [slot]
│ │ └── item [slot]
│ │ ├── itemLeading [slot]
│ │ ├── itemWrapper [slot]
│ │ │ ├── itemLabel [slot]
│ │ │ └── itemDescription [slot]
│ │ └── itemTrailing [slot]
│ └── empty [slot]
└── footer [slot]
```
Group labels and items may be flattened into sibling rows when virtualized. Trailing descriptions render inside itemLabel.
## Usage
### Groups, filtering, and selection
Pass groups and items from application state. The palette filters the supplied collection and invokes item selection callbacks; fetching commands, routing, and global keyboard shortcuts are application-owned.
```tsx
import { CommandPalette, Icon } from 'moraine'
import type { CommandPaletteT } from 'moraine'
import { createSignal } from 'solid-js'
const COMMAND_GROUPS: CommandPaletteT.Group[] = [
{
id: 'workspace',
label: 'Workspace sections',
items: [
{
value: 'overview',
label: 'Overview',
description: 'Recent activity and open work',
leadingRender: () => ,
},
{
value: 'members',
label: 'Members',
description: 'People with workspace access',
leadingRender: () => ,
},
{
value: 'security',
label: 'Security',
description: 'Sign-in and access policies',
leadingRender: () => ,
},
],
},
]
export function GroupsFiltering() {
const [section, setSection] = createSignal('overview')
return (
setSection(item.value)}
/>
Current section: {section()}
)
}
```
### Custom states and navigation
Use the custom item renderer for a changed item layout, and provide loading or empty content when those states need explanation. Sub-navigation should represent a short, deliberate branch of commands rather than a complete application shell.
```tsx
import { CommandPalette } from 'moraine'
export function CustomStates() {
return (
(
No commands found matching your query.
)}
/>
)
}
```
### Keyboard interaction
| Key | Description |
| -------------------------------- | ---------------------------------------------------------------------- |
| ArrowDown | Moves to the next available command. |
| ArrowUp | Moves to the previous available command. |
| Enter | Activates the current command. |
| Escape | Clears the current query or requests close according to current state. |
| Home / End | Moves to the first or last available command. |
## Examples
### Custom item rendering
```tsx
import { Badge, CommandPalette, Icon } from 'moraine'
import type { CommandPaletteT } from 'moraine'
interface TeamCommand extends CommandPaletteT.Item {
owner: string
status: 'ready' | 'blocked'
}
const GROUPS: CommandPaletteT.Group[] = [
{
id: 'projects',
label: 'Projects',
items: [
{
value: 'moraine-docs',
label: 'Moraine Docs',
description: 'Update examples for the next release',
owner: 'Design Systems',
status: 'ready',
},
{
value: 'billing-api',
label: 'Billing API',
description: 'Waiting on staging credentials',
owner: 'Platform',
status: 'blocked',
},
],
},
]
export function CustomItemRender() {
return (