Component reference
Command
Searchable actions with keyboard navigation and optional palette presentation.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Loading the interactive example?
Width adapts to the available space
"use client";
import { useState } from "react";
import { Command } from "@pimolu/react";
export function CommandExample() {
const [selected, setSelected] = useState("No action selected.");
return (
<div className="space-y-4">
<Command
autoFocus={false}
aria-label="Example workspace commands"
items={[
{
id: "project",
label: "Create project",
group: "Workspace",
keywords: [
"new",
"start"
]
},
{
id: "theme",
label: "Change theme",
group: "Preferences",
keywords: [
"appearance",
"dark"
]
},
{
id: "archive",
label: "Archive workspace",
disabled: true
}
]}
onSelect={(item) => setSelected(`${item.label} selected.`)}
/>
<p role="status">{selected}</p>
</div>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Find a teammate
Search includes descriptive keywords; selecting a result updates the active assignee.
Inline command
Type to filter, then use ArrowUp/Down and Enter.
Palette
A modal command list. The shortcut opens it with Cmd/Ctrl+K; no trigger is required.
Usage
Provide stable item ids, labels, optional groups and keywords. onSelect receives the selected item after the item's own onSelect callback.
Command is an inline search surface. CommandPalette adds the Dialog and an optional Cmd/Ctrl shortcut. Disable autofocus for inline examples that should not move focus on page load.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluCommandItem
Type source| Name | Type | Default | Description |
|---|---|---|---|
idRequired | string | — | Stable identifier, also used to track the active option. |
labelRequired | string | "Command palette" | Primary text of the command. |
description | string | undefined | — | Optional secondary text shown under the label. |
group | string | undefined | — | Heading that groups related commands. |
keywords | readonly string[] | undefined | — | Extra search terms matched case-insensitively. |
shortcut | string | undefined | — | Keyboard hint shown on the right, for example "Ctrl+K". |
icon | ReactNode | — | Leading visual, hidden from assistive technology. |
disabled | boolean | undefined | — | Keep the command visible but prevent selecting it. |
onSelect | (() => void) | undefined | — | Called when the command is selected. |
idRequiredstringNo default extracted.
Stable identifier, also used to track the active option.
labelRequiredstringDefault: "Command palette"
Primary text of the command.
descriptionstring | undefinedNo default extracted.
Optional secondary text shown under the label.
groupstring | undefinedNo default extracted.
Heading that groups related commands.
keywordsreadonly string[] | undefinedNo default extracted.
Extra search terms matched case-insensitively.
shortcutstring | undefinedNo default extracted.
Keyboard hint shown on the right, for example "Ctrl+K".
iconReactNodeNo default extracted.
Leading visual, hidden from assistive technology.
disabledboolean | undefinedNo default extracted.
Keep the command visible but prevent selecting it.
onSelect(() => void) | undefinedNo default extracted.
Called when the command is selected.
PimoluCommandProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
itemsRequired | readonly PimoluCommandItem[] | — | Public Pimolu prop; see the source declaration for details. |
placeholder | string | undefined | "Search commands..." | Placeholder of the search field. |
emptyMessage | string | undefined | "No commands found." | Message shown when no command matches the query. |
aria-label | string | undefined | — | Accessible name of the search field and the listbox. |
onSelect | ((item: PimoluCommandItem) => void) | undefined | — | Called after the selected item's own `onSelect`. |
className | string | undefined | — | Class applied to the command root. |
autoFocus | boolean | undefined | true | Focus the search field on mount. Defaults to true. |
itemsRequiredreadonly PimoluCommandItem[]No default extracted.
Public Pimolu prop; see the source declaration for details.
placeholderstring | undefinedDefault: "Search commands..."
Placeholder of the search field.
emptyMessagestring | undefinedDefault: "No commands found."
Message shown when no command matches the query.
aria-labelstring | undefinedNo default extracted.
Accessible name of the search field and the listbox.
onSelect((item: PimoluCommandItem) => void) | undefinedNo default extracted.
Called after the selected item's own `onSelect`.
classNamestring | undefinedNo default extracted.
Class applied to the command root.
autoFocusboolean | undefinedDefault: true
Focus the search field on mount. Defaults to true.
PimoluCommandPaletteProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | undefined | — | Controlled open state. Omit to let the component own it. |
defaultOpen | boolean | undefined | false | Initial open state when uncontrolled. Defaults to false. |
onOpenChange | ((open: boolean) => void) | undefined | — | Called whenever the palette asks to open or close. |
itemsRequired | readonly PimoluCommandItem[] | — | Public Pimolu prop; see the source declaration for details. |
label | string | undefined | "Command palette" | Accessible name of the dialog and its search field. |
shortcut | string | undefined | — | Key that opens the palette with Cmd/Ctrl, for example "k". |
placeholder | string | undefined | "Search commands..." | Placeholder of the search field. |
emptyMessage | string | undefined | "No commands found." | Message shown when no command matches the query. |
onSelect | ((item: PimoluCommandItem) => void) | undefined | — | Called after the selected item's own `onSelect`. |
className | string | undefined | — | Class applied to the dialog panel. |
autoFocus | boolean | undefined | true | Focus the search field on mount. Defaults to true. |
openboolean | undefinedNo default extracted.
Controlled open state. Omit to let the component own it.
defaultOpenboolean | undefinedDefault: false
Initial open state when uncontrolled. Defaults to false.
onOpenChange((open: boolean) => void) | undefinedNo default extracted.
Called whenever the palette asks to open or close.
itemsRequiredreadonly PimoluCommandItem[]No default extracted.
Public Pimolu prop; see the source declaration for details.
labelstring | undefinedDefault: "Command palette"
Accessible name of the dialog and its search field.
shortcutstring | undefinedNo default extracted.
Key that opens the palette with Cmd/Ctrl, for example "k".
placeholderstring | undefinedDefault: "Search commands..."
Placeholder of the search field.
emptyMessagestring | undefinedDefault: "No commands found."
Message shown when no command matches the query.
onSelect((item: PimoluCommandItem) => void) | undefinedNo default extracted.
Called after the selected item's own `onSelect`.
classNamestring | undefinedNo default extracted.
Class applied to the dialog panel.
autoFocusboolean | undefinedDefault: true
Focus the search field on mount. Defaults to true.
Accessibility
- Provide aria-label for an inline Command, or label for CommandPalette.
- Use arrows and Enter to select a result, and Escape to dismiss a palette. Do not claim a shortcut works unless your application registers or configures it.