CommandPalette

Stable
WCAG 2.2 evidence
RTL

A searchable list of pages, actions and people in a modal. Built on React Aria ModalOverlay + Modal + Dialog around an Autocomplete (a TextField filtering a Menu): focus starts in the search field; typing filters the results, the up and down arrows move the active result while focus stays in the field (aria-activedescendant), Enter runs it and closes the palette, Escape closes it, and focus returns to the trigger; the page is inert meanwhile (WCAG 2.1.1, 2.1.2, 2.4.3, 4.1.2). The number of results is announced politely once typing pauses (4.1.3). Consumer duties: result wording, the shortcut that opens it (for example Ctrl/Cmd+K) and its hint. Do not make it the only way to navigate.

import { CommandPalette } from "@nexera-ui/react";

Loading example…

5
examples: 26
props: 2
live controls: 1
platform: 10
WCAG criteria: 1
block uses it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

isDismissabletrue

defaultOpenfalse

Generated code

import { CommandPalette } from "@nexera-ui/react";

<CommandPalette />

Examples 4

The same examples as Storybook, rendered live. Open Code to copy one.

No results

Nothing matches: the list says so, and "No results" is announced.

Loading example…

app.tsx

import {
  Button,
  CommandPalette,
  CommandPaletteItem,
  CommandPaletteSection,
} from "@nexera-ui/react";
import { LuCalendarDays, LuClipboardCheck, LuPlus, LuSettings, LuUser } from "react-icons/lu";

const results = [
  <CommandPaletteSection key="pages" title="Pages">
    <CommandPaletteItem
      id="calendar"
      label="Leave calendar"
      icon={<LuCalendarDays />}
      shortcut="G L"
    />
    <CommandPaletteItem
      id="approvals"
      label="Leave approvals"
      icon={<LuClipboardCheck />}
      shortcut="G A"
    />
  </CommandPaletteSection>,
  <CommandPaletteSection key="actions" title="Actions">
    <CommandPaletteItem id="request" label="Request leave" icon={<LuPlus />} shortcut="N L" />
    <CommandPaletteItem id="policy" label="Leave policy settings" icon={<LuSettings />} />
  </CommandPaletteSection>,
  <CommandPaletteSection key="people" title="People">
    <CommandPaletteItem
      id="ayesha"
      label="Ayesha Khan  ·  on leave 14 to 16 Oct"
      icon={<LuUser />}
    />
  </CommandPaletteSection>,
];

<CommandPalette
  trigger={<Button variant="secondary">Search</Button>}
  defaultOpen
  defaultQuery="payslip 2019"
  hints={[
    { keys: "↑↓", label: "navigate" },
    { keys: "↵", label: "open" },
    { keys: "Ctrl K", label: "toggle" },
  ]}
>
  {results}
</CommandPalette>;

All results

Without a query: every result, grouped.

Loading example…

app.tsx

import {
  Button,
  CommandPalette,
  CommandPaletteItem,
  CommandPaletteSection,
} from "@nexera-ui/react";
import { LuCalendarDays, LuClipboardCheck, LuPlus, LuSettings, LuUser } from "react-icons/lu";

const results = [
  <CommandPaletteSection key="pages" title="Pages">
    <CommandPaletteItem
      id="calendar"
      label="Leave calendar"
      icon={<LuCalendarDays />}
      shortcut="G L"
    />
    <CommandPaletteItem
      id="approvals"
      label="Leave approvals"
      icon={<LuClipboardCheck />}
      shortcut="G A"
    />
  </CommandPaletteSection>,
  <CommandPaletteSection key="actions" title="Actions">
    <CommandPaletteItem id="request" label="Request leave" icon={<LuPlus />} shortcut="N L" />
    <CommandPaletteItem id="policy" label="Leave policy settings" icon={<LuSettings />} />
  </CommandPaletteSection>,
  <CommandPaletteSection key="people" title="People">
    <CommandPaletteItem
      id="ayesha"
      label="Ayesha Khan  ·  on leave 14 to 16 Oct"
      icon={<LuUser />}
    />
  </CommandPaletteSection>,
];

<CommandPalette
  trigger={<Button variant="secondary">Search</Button>}
  defaultOpen
  defaultQuery=""
  hints={[
    { keys: "↑↓", label: "navigate" },
    { keys: "↵", label: "open" },
    { keys: "Ctrl K", label: "toggle" },
  ]}
>
  {results}
</CommandPalette>;

Long labels

Long labels wrap; the shortcut chips stay on one line.

Loading example…

app.tsx

import {
  Button,
  CommandPalette,
  CommandPaletteItem,
  CommandPaletteSection,
} from "@nexera-ui/react";
import { LuUser } from "react-icons/lu";

<CommandPalette
  trigger={<Button variant="secondary">Search</Button>}
  defaultOpen
  defaultQuery=""
  hints={[
    { keys: "↑↓", label: "navigate" },
    { keys: "↵", label: "open" },
    { keys: "Ctrl K", label: "toggle" },
  ]}
>
  {[
    <CommandPaletteSection key="people" title="People">
      <CommandPaletteItem
        id="ayesha"
        label="Ayesha Khan, senior accountant in the payroll team, on leave from 14 to 16 October"
        icon={<LuUser />}
        shortcut="G P"
      />
    </CommandPaletteSection>,
  ]}
</CommandPalette>;

Right to left

Right-to-left: icons and labels start on the right; key chips stay left-to-right.

Loading example…

app.tsx

import {
  Button,
  CommandPalette,
  CommandPaletteItem,
  CommandPaletteSection,
} from "@nexera-ui/react";
import { LuCalendarDays, LuPlus } from "react-icons/lu";

<CommandPalette
  trigger={<Button variant="secondary">بحث</Button>}
  defaultOpen
  defaultQuery=""
  hints={[
    { keys: "↑↓", label: "تنقل" },
    { keys: "↵", label: "فتح" },
  ]}
  aria-label="لوحة الأوامر"
  searchLabel="بحث"
  resultsLabel="النتائج"
  emptyLabel="لا توجد نتائج"
>
  {[
    <CommandPaletteSection key="pages" title="الصفحات">
      <CommandPaletteItem
        id="calendar"
        label="تقويم الإجازات"
        icon={<LuCalendarDays />}
        shortcut="G L"
      />
      <CommandPaletteItem id="request" label="طلب إجازة" icon={<LuPlus />} shortcut="N L" />
    </CommandPaletteSection>,
  ]}
</CommandPalette>;

Props 26

Press "Try it" on a card to load that prop into the playground.

queryNexera

string

The search text, controlled. Use with onQueryChange.

defaultQueryNexera

string

The search text each time the palette opens (uncontrolled).

onQueryChangeNexera

(query: string) => void

Called on every change of the search text.

onActionNexera

(key: Key) => void

Called with the result's id when it is chosen (Enter or a click); the palette then closes and focus returns to the trigger. Results with an href navigate instead.

filterNexera

(textValue: string, query: string) => boolean

Decides whether a result matches the search text. Defaults to a case- and accent-insensitive "contains" on the result's textValue (its label when that is a string), using the locale.

aria-labelNexera

string

Accessible name of the dialog. Translate it for your locale.

searchLabelNexera

string

Accessible name and placeholder of the search field. Translate it for your locale.

resultsLabelNexera

string

Accessible name of the list of results. Translate it for your locale.

emptyLabelNexera

ReactNode

Shown in the list when nothing matches. Translate it for your locale.

resultCountLabelNexera

(count: number) => string

Text announced (politely) when the number of results changes after typing. Translate it for your locale.

escapeHintNexera

string

Hint in the search row for the key that closes the palette.

hintsNexera

readonly CommandPaletteHint[]

Keyboard hints in the footer. Add { keys: "Ctrl K", label: "toggle" } when you wire that shortcut to open the palette (the shortcut is yours to register). An empty array hides the footer.

isDismissableNexera

boolean

Whether a click on the scrim closes the palette.

idNexera

string

Id of the surface element.

classNameNexera

string

Extra classes for the surface, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style for the surface.

triggerNexera

ReactElement<unknown, string | JSXElementConstructor<any>>

The element that opens the overlay, usually a Nexera Button. It toggles the overlay when pressed and gets focus back when the overlay closes. Leave it out to open the overlay from your own state (isOpen + onOpenChange).

isOpenNexera

boolean

Whether the overlay is open (controlled). Use with onOpenChange.

defaultOpenNexera

boolean

Whether the overlay is open on first render (uncontrolled).

onOpenChangeNexera

(isOpen: boolean) => void

Called when the overlay opens or closes (Escape, the close button, a slot="close" action, a click outside).

childrenReact Aria

ReactNode | ((item: T) => ReactNode)

The contents of the collection.

itemsReact Aria

Iterable<T>

Item objects in the collection.

disabledKeysReact Aria

Iterable<Key>

The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.

dependenciesReact Aria

readonly any[]

Values that should invalidate the item cache when using dynamic collections.

shouldCloseOnInteractOutsideReact Aria

(element: Element) => boolean

When user interacts with the argument element outside of the overlay ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the overlay. By default, onClose will always be called on interaction outside the overlay ref.

isKeyboardDismissDisabledReact Aria

boolean

Whether pressing the escape key to close the modal should be disabled.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

6 direct · 4 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.4.10ReflowLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.1.2No Keyboard TrapLevel A · tested directly
2.3.3Animation from InteractionsLevel AAA · supporting test
2.4.3Focus OrderLevel A · tested directly
2.4.7Focus VisibleLevel AA · supporting test
4.1.2Name, Role, ValueLevel A · tested directly
4.1.3Status MessagesLevel AA · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-disabled
data-focused
data-hovered

Usage

<CommandPalette className="data-disabled:opacity-90 shadow-sm" />

Used in blocks

Command paletteApp shells and navigation

Theme studio

CommandPalette

Try every prop. Copy the code.

Examples 4

No results

All results

Long labels

Right to left

Props 26

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components