react-command-palette, a WAI-ARIA command palette with fuzzy search and a props-heavy API

A command palette built to match editor behaviour

react-command-palette is described as a WAI-ARIA compliant React command palette like the one in Atom and Sublime, and the repository description calls it an accessible browser compatible javascript command palette. The topics list adds accessibility, autosuggest, fuzzy-matching, menu, navigation and react.

The editor reference sets expectations. A palette like this opens with a hotkey, focuses a text input, filters a list of commands as you type, lets you move through the list with the keyboard, and runs something when you select. The package provides that surface rather than a generic autocomplete widget, and the WAI-ARIA compliance is stated as a goal rather than a detail.

That accessibility claim is the reason to look at this package rather than rolling your own, because getting combobox roles, listbox semantics and focus management right in a modal is fiddly work that most teams get wrong once and never revisit. The repository also carries a SECURITY.md, a CODE_OF_CONDUCT.md, a CHANGELOG.md, a .codeclimate.yml, an .eslintignore and a .mergify.yml, which is the usual set of files for a package with a real process around it.

The live playground is at react-command-palette.js.org, and it is a Storybook build.

Installing the package and rendering a first palette

The package installs from npm:

$ npm i --save react-command-palette

Using it means passing an array of commands. Each command has a name and a command function, and the component is rendered like any other React component:

import { createRoot } from 'react-dom/client';
import CommandPalette from 'react-command-palette';
 const container = document.getElementById('app');
 const root = createRoot(container);
 root.render(<CommandPalette commands={commands} />)

The peer dependencies are react and react-dom, both declared as a range from 16 to 19, and the engines field requires Node 20 or newer. The library itself is MIT licensed.

To try the examples on your own machine, the README says to clone the repository, run `npm install` and `npm run storybook`, then visit http://localhost:6006/. The scripts in package.json confirm the layout: the storybook script runs `storybook dev -p 6006`, and the release script is `auto shipit --base-branch=main`, which is a fairly assertive statement that releases are automated from the main branch rather than cut by hand.

The package is built with Rollup, with the build script running `cross-env BABEL_ENV=production rollup -c`, and the published entry points are dist/index.js as the CommonJS main and dist/index.es.js as the module field.

Behaviour is a prop per behaviour, not a mode

The props list is long, and reading it tells you the design philosophy. Instead of a display or behaviour mode, each decision is its own switch.

Presentation comes first. The open prop is a boolean that forces the palette to be displayed and defaults to false. The display prop takes modal or inline, with modal as the default, so the palette renders centered in a modal or inline with other page content. The alwaysRenderCommands prop keeps suggestions rendered even when the input is not focused. The header prop takes a string or a React.ComponentType and provides a helpful description at the top of the palette, and it is not displayed by default, with src/examples/sampleInstruction.js given as the reference implementation.

Then the lifecycle props. closeOnSelect makes the palette close immediately when the user makes a selection, and defaults to false. resetInputOnOpen resets the user's query to the defaultInputValue when the palette opens, also defaulting to false. resetCommandsOnOpen resets the commands to the initial data from props.commands each time it opens.

Two content props round it out. The placeholder is the short description shown in the input until the user types, defaulting to Type a command, and the defaultInputValue determines the initial text, empty by default.

The one you will meet first is hotKeys, a string or an array of strings holding the shortcut for opening and closing the palette, defaulting to command+shift+p, and it uses mousetrap key combos. If your application already uses that combination, this is the first prop you will have to change.

The fuzzy search options prop is marked use at your own risk

Searching is the part that has to feel right, and here the library delegates to fuzzysort while exposing the knobs.

The options prop controls how fuzzy search is configured, and the README is unusually direct about it: use at your own risk, this is likely to change in the future. The search options derive from fuzzysort options, but the command palette options prop has to include two values to function correctly:

    key: "name", // default is "name"
    keys: ["name"], // default is "name"
    limit: 7,

The other options, threshold, allowTypo and scoreFn, may be configured freely, with the caveat that the key and keys entries must be present. The defaults shown include a threshold of -Infinity and a limit of 7, so seven suggestions are returned by default.

That warning is worth taking seriously for a component in a public interface. The fuzzy matcher is the part of a command palette users feel most directly, and the option names are tied to the underlying library rather than to a stable public contract of this package, so a version bump of fuzzysort could change behaviour underneath you. If the ranking matters to you, pin your dependencies and test the ordering of your own command list rather than assuming it.

Hooks for filtering, changes, highlights and selection

The event props give you the places where a palette application usually needs to intervene.

filterSearchQuery is a function that filters the searched input. If the prop is not used, the default behaviour searches using the input exactly as the user entered it. Otherwise whatever the function returns is the text that gets searched, and the README suggests using this to strip extraneous characters such as > or ?, the way VS Code handles action keys. The example in the props list uses a regular expression to remove a leading > or ? and searches on the remainder.

onChange is called when the input value changes, and it receives two values, the current value of the input field and the user's typed input. The documentation notes that the query ignores keyboard navigation and clicks, which matters if you are logging or filtering on the raw input.

onHighlight fires when the highlighted suggestion changes, and onSelect fires when the selected suggestion changes, given the user selects an item or clears the selection, in which case it is called with null. There are also onAfterOpen, which fires after the modal is opened, and onRequestClose, which runs when the modal is requested to close, either by clicking the overlay or pressing ESC.

There is one more prop worth understanding. getSuggestionValue is a function that react-autosuggest needs in order to populate the input element when a suggestion is clicked, and by default the highlighted suggestion is displayed. This is the prop to reach for when your commands carry a display name and an identifier that differ.

Storybook, rollup and a release cadence to check

The build and test setup tells you how seriously the package is maintained. The devDependencies include the Storybook accessibility addon, the Storybook actions addon, Rollup with Babel, commonjs, node-resolve, replace and terser plugins, and a resolution that pins the Storybook React babel-loader to 8.1.0. The scripts include a coverage run and separate build-storybook and build-storybook-docs commands, and the Chromatic script carries a project token with an exit-zero-on-changes flag, which is how visual regression of the components is checked.

The test script runs react-scripts test with SKIP_PREFLIGHT_CHECK=true, and the coverage script adds the coverage, watchAll=false, silent and ci flags.

The release history is the part to note. Version 0.22.0 and 0.22.1 both date from 2022, in November and December, while 0.22.2 was published on 2026-01-17, and the last push to the main branch was on 2026-06-20. The version in package.json is 0.22.2. So a package with a 2022 release line received a patch in early 2026 and has had commits since, which is the profile of a project that is worked on occasionally rather than continuously.

For a component with no runtime dependencies of its own beyond React, that maintenance level is often fine, because there is little to break. It matters more if you plan to depend on the fuzzy search behaviour, where the options prop is already documented as unstable.

Editorial conclusion

Adopt react-command-palette if you want an accessible command palette for a React application without writing the ARIA roles, the fuzzy matcher and the keyboard handling yourself, since the package is explicitly built for that and ships a Storybook playground to try it. Do not adopt it for a design that demands something outside a text input and a list, because the component is a command palette and not a general search UI, and be careful with the fuzzy search options, which the README marks as use at your own risk. Before you commit, check the peer dependency range, react 16 to 19, confirm the hotkey default of command+shift+p does not clash with your app, read the options prop documentation before changing it, and note the release history, where 0.22.2 shipped on 2026-01-17 after a long gap and the last push was on 2026-06-20.

Frequently asked questions

Official sources

1. asabaylus/react-command-palette on GitHub
2. License: MIT
3. Project website
4. README
5. Releases