Fluxo UIFluxo UIv0.4.1

Command Palette

A modal launcher with fuzzy search across registered commands, opened via a global hotkey.

Basic Usage

Default Command Palette

Open with ⌘K (or Ctrl+K) or click the button. Type to filter, arrow keys to navigate, Enter to run, Esc to close.

Last command: —
import { CommandPalette } from 'fluxo-ui';

const [open, setOpen] = useState(false);
const [last, setLast] = useState('');

const commands = [
  { id: 'new', title: 'New file', group: 'File', shortcut: '⌘N', icon: EditIcon, onSelect: () => setLast('new') },
  { id: 'open', title: 'Open file', group: 'File', shortcut: '⌘O', icon: CopyIcon, onSelect: () => setLast('open') },
  { id: 'settings', title: 'Open settings', group: 'App', shortcut: '⌘,', icon: SettingsIcon, onSelect: () => setLast('settings') },
];

<CommandPalette open={open} onOpenChange={setOpen} commands={commands} />

Customization

Custom hotkey, group order, placeholder, empty message

Open with mod+/. Hidden command items (disabled) are visually dimmed and not selectable.

Last command: —
<CommandPalette
  open={open}
  onOpenChange={setOpen}
  commands={commands}
  hotkey="mod+/"
  placeholder="Type to search..."
  emptyMessage={<span>Nothing matches "{query}"</span>}
  groupOrder={['Navigation', 'Actions']}
  maxResults={20}
/>

Import

import { CommandPalette } from 'fluxo-ui';
import type { CommandPaletteProps, CommandPaletteCommand } from 'fluxo-ui';

Props

commandsreq
Array<CommandPaletteCommand>

Registered commands: { id, title, subtitle?, group?, keywords?, icon?, shortcut?, onSelect, disabled?, danger? }

open
boolean

Controlled open state

onOpenChange
(open: boolean) => void

Called when the palette opens or closes

hotkey
string"'mod+k'"

Global hotkey to toggle the palette ('mod' = Cmd on Mac, Ctrl elsewhere)

placeholder
string"'Type a command or search...'"

Search input placeholder

emptyMessage
string | ReactNode"'No commands found'"

Shown when no commands match the query

recents
{ storageKey?: string; limit?: number }

When provided, persists recently selected ids to localStorage

groupOrder
string[]

Explicit ordering of group headings

maxResults
number"50"

Maximum number of items to show

filterFn
(command, query: string) => number

Custom scorer; return 0 to hide. Default: subsequence match on title/keywords/group

id
string

HTML id attribute

className
string

Additional CSS classes

ariaLabel
string"'Command palette'"

Accessible label for the dialog

Features

Global Hotkey

⌘K / Ctrl+K out of the box — fully configurable with the hotkey prop.

Fuzzy Search

Sub-sequence matching with score-based ranking; supply a custom filterFn for full control.

Recents

Optional localStorage-backed recents bubble up under no-query state.

Full Keyboard

Arrow / Home / End to navigate, Enter to run, Esc to close, Tab cycles input/list.