Components / Command

Command

Searchable command palette (Cmd+K-style modal) with combobox pattern, grouped items, leading icons, kbd-pill shortcuts, keyword type-ahead filtering, and full keyboard navigation. Used as the foundation for ai-command-palette. Each CommandItem accepts: id, label, group?, icon? (cg-icon name), shortcut?, keywords?, disabled?.

overlays v0.7.0

Playground

Examples

Developer command palette (with icons)

Click the button or press ⌘K / Ctrl+K to open. Try typing "save", "theme", or "find".

Open command palette (⌘K)

<cg-stack direction="column" gap="md">
  <cg-text size="sm" muted>Click the button or press <strong>⌘K</strong> / <strong>Ctrl+K</strong> to open. Try typing "save", "theme", or "find".</cg-text>
  <cg-button variant="primary" id="cmd-trigger" style="align-self:flex-start;">Open command palette (⌘K)</cg-button>
  <cg-command id="cmd-demo"></cg-command>
</cg-stack>

Loading state

Async-fetched commands — palette opens with a spinner, then resolves after 1.5s.

Open loading palette

<cg-stack direction="column" gap="md">
  <cg-text size="sm" muted>Async-fetched commands — palette opens with a spinner, then resolves after 1.5s.</cg-text>
  <cg-button variant="primary" id="cmd-loading-trigger" style="align-self:flex-start;">Open loading palette</cg-button>
  <cg-command id="cmd-loading-demo" loading></cg-command>
</cg-stack>

Custom empty state

Type something that doesn't match any command (e.g. "xyz") to see the custom empty slot.

Open palette

Nothing here yet

Try a different keyword.

<cg-stack direction="column" gap="md">
  <cg-text size="sm" muted>Type something that doesn't match any command (e.g. "xyz") to see the custom empty slot.</cg-text>
  <cg-button variant="primary" id="cmd-empty-trigger" style="align-self:flex-start;">Open palette</cg-button>
  <cg-command id="cmd-empty-demo">
    <div slot="empty" style="padding:32px;text-align:center;">
      <cg-stack direction="column" gap="sm" align="center">
        <cg-icon name="minimalistic-magnifer-linear" size="lg"></cg-icon>
        <cg-text size="sm" weight="semibold">Nothing here yet</cg-text>
        <cg-text size="xs" muted>Try a different keyword.</cg-text>
      </cg-stack>
    </div>
  </cg-command>
</cg-stack>

Import

import { CgCommand } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/cg-command';

Per-component imports ship only that component (~8 kB gzip).

API Reference

Prop	Type	Default	Description
`open`	boolean	false	Open state — when true, the modal palette renders centered over the viewport with a backdrop
`placeholder`	string	"Type a command or search…"	Input placeholder
`commands`	CommandItem[]	[]	Available commands. Each item: { id, label, group?, icon?, shortcut?, keywords?, disabled? }. Items with the same group render together under an uppercase group label.
`value`	string	""	Current search query — bound to the input. Filters by label and keywords.
`empty-text`	string	"No results found."	Empty-state text shown when no commands match the query
`loading`	boolean	false	Loading state — replaces the list with a centered cg-spinner + "Loading…" label. Use while async-fetching commands.

Events

Event	Detail	Description
`cg-command-select`	{ id: string, command: CommandItem }	A command was selected (click or Enter). Palette closes automatically; input clears.
`cg-command-input`	{ value: string }	Search query changed — fires on every input event
`cg-command-open`	none	Palette opened (backdrop + modal both visible)
`cg-command-close`	none	Palette closed (Escape, backdrop click, or item selection)