Mordecai
Getting Started
Forms
Layout
Cards
Navigation
Data Display
Feedback
Overlays
Utilities
Blocks
CMS Integration
GitHub

Command

A command palette for fast navigation and actions with keyboard support.

CMSPayload CMS Integration

Command palettes can provide quick access to CMS actions like creating new content, searching documents, or switching between collections.

CMS Demo

See how to integrate a command palette with CMS actions:

Loading...
CMS ConfigurationCommand palette with CMS actions

Basic Usage

Loading...
CommandSearchable command palette

Installation

pnpm add @corew500/ui

Usage

import {
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
} from "@mordecai-design-system/ui"
<Command>
  <CommandInput placeholder="Search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Examples

Dialog Mode

import { CommandDialog } from "@mordecai-design-system/ui"

<CommandDialog open={open} onOpenChange={setOpen}>
  <Command>
    <CommandInput placeholder="Type a command..." />
    <CommandList>
      <CommandGroup heading="Actions">
        <CommandItem>New File</CommandItem>
        <CommandItem>Settings</CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</CommandDialog>

With Shortcuts

<CommandItem>
  <span>Settings</span>
  <CommandShortcut>⌘S</CommandShortcut>
</CommandItem>

With Icons

<CommandItem>
  <CalendarIcon className="mr-2" />
  <span>Calendar</span>
</CommandItem>

Sub-components

| Component | Description | |-----------|-------------| | Command | Root container with search functionality | | CommandDialog | Command in a dialog overlay | | CommandInput | Search input field | | CommandList | Scrollable list of results | | CommandEmpty | Shown when no results match | | CommandGroup | Grouping for related items | | CommandItem | Individual selectable item | | CommandShortcut | Keyboard shortcut display | | CommandSeparator | Visual separator between groups |

Props

CommandDialog

PropTypeDefaultDescription
openenum—Whether the dialog is currently open.
defaultOpenenumfalseWhether the dialog is initially open. To render a controlled dialog, use the `open` prop instead.
modalenumtrueDetermines if the dialog enters a modal state when open. - `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled. - `false`: user interaction with the rest of the document is allowed. - `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.
onOpenChange(open: boolean, eventDetails: DialogRootChangeEventDetails) => void—Event handler called when the dialog is opened or closed.
onOpenChangeComplete(open: boolean) => void—Event handler called after any animations complete when the dialog is opened or closed.
disablePointerDismissalenumfalseDetermines whether the dialog should close on outside clicks.
actionsRefRefObject<DialogRootActions>—A ref to imperative actions. - `unmount`: When specified, the dialog will not be unmounted when closed. Instead, the `unmount` function must be called to unmount the dialog manually. Useful when the dialog's animation is controlled by an external library. - `close`: Closes the dialog imperatively when called.
handleDialogHandle<unknown>—A handle to associate the dialog with a trigger. If specified, allows external triggers to control the dialog's open state. Can be created with the Dialog.createHandle() method.
triggerIdstring—ID of the trigger that the dialog is associated with. This is useful in conjunction with the `open` prop to create a controlled dialog. There's no need to specify this prop when the popover is uncontrolled (i.e. when the `open` prop is not set).
defaultTriggerIdstring—ID of the trigger that the dialog is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open dialog.
titlestringCommand Palette—
descriptionstringSearch for a command to run...—
classNamestring——
showCloseButtonenumfalse—

CommandItem

PropTypeDefaultDescription
asChildenum——
disabledenum—Whether this item is currently disabled.
onSelect(value: string) => void—Event handler for when this item is selected, either via click or keyboard selection.
valuestring—A unique value for this item. If no value is provided, it will be inferred from `children` or the rendered `textContent`. If your `textContent` changes between renders, you _must_ provide a stable, unique `value`.
keywordsstring[]—Optional keywords to match against when filtering.
forceMountenum—Whether this item is forcibly rendered regardless of filtering.

Keyboard Navigation

| Key | Action | |-----|--------| | ↑ ↓ | Navigate items | | Enter | Select item | | Esc | Close dialog | | ⌘K / Ctrl+K | Open (when configured) |

Accessibility

  • Full keyboard navigation support
  • Items are announced to screen readers
  • Focus is trapped within dialog mode