ReferenceComponentsDialogs, toasts, and overlays
CommandPalette
CommandPalette component API, behavior, and executable example.
Loading executable example…
API and events
Layer focus-trapped dialogs, contextual help, transient notices, and searchable command execution over an application.
export function CommandPalette(props: CommandPaletteProps): ReactNode;Props, functions, and events
| Member | Type | Required | Description | Related types |
|---|---|---|---|---|
open | boolean | undefined | No | The open member uses the boolean | undefined contract. | — |
defaultOpen | boolean | undefined | No | The defaultOpen member uses the boolean | undefined contract. | — |
onOpenChange | ((open: boolean) => void | Promise<void>) | undefined | No | The onOpenChange member uses the ((open: boolean) => void | Promise<void>) | undefined contract. | — |
commands | readonly Command<unknown>[] | undefined | No | The commands member uses the readonly Command<unknown>[] | undefined contract. | Command |
placeholder | string | undefined | No | The placeholder member uses the string | undefined contract. | — |
hotkey | string | undefined | No | The hotkey member uses the string | undefined contract. | — |
Open state and selections flow through onOpenChange, onPress, command callbacks, and the toast API.
Callback props run after the documented input is accepted. Callbacks are not cancellable unless their return type or description states otherwise.
Interaction and capabilities
The top overlay receives input before application hotkeys. Escape closes dismissible overlays and focus returns to the prior node.
The published manifest records keyboard, focus, pointer, theme, terminal, semantic, event, and dependency requirements.
Complete import
import { CommandPalette } from "@/components/tuil/feedback/overlays";