CommandPalette

One search for every view and action of an app, opened with Cmd K or Ctrl K. Pick it for apps with many places to go; use GlobalSearch for content.

CommandPalette

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, CommandPalette

Or press Ctrl K or ⌘ K.

Dark theme, CommandPalette

Or press Ctrl K or ⌘ K.

High contrast theme, CommandPalette

Or press Ctrl K or ⌘ K.

See it in actionLink to the section See it in action

Type to filter, arrows to move, Enter to run.

UsageLink to the section Usage

tsx

import { CommandPalette } from '@skribly/ui/search'

tsx

<CommandPalette isOpen={open} onOpenChange={setOpen} shortcut commands={commands}
  label="Command palette" searchLabel="Search commands" listLabel="Commands" closeLabel="Close"
  emptyLabel={(q) => `Nothing matches “${q}”.`} />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A modal dialog: focus starts in the search field, stays inside while open and returns to the trigger on close.
Typing filters by label, hint and keywords in a fuzzy way, with the matched letters marked.
Up and Down move, Enter runs, Escape clears the field and then closes.
Commands are menu items named by their label and then their hint, with the shortcut as key caps; disabled ones are announced as such.
On narrow screens it becomes a full-screen sheet with a close button.

This demo runs through axe in all three themes on every test run. See what the tests check.