Command palettes and keyboard-driven selectors are error-prone to build from scratch: focus trapping breaks with portal DOM, keyboard navigation requires careful index management, search filtering duplicates query logic, and escape key handling conflicts with app shortcuts. Without a dedicated primitive, teams either copy fragile code across projects or dodge the feature entirely, forcing users to slog through forms and menus instead of typing.

Command is a controlled compound component with named subcomponents — Command.Input, Command.List, Command.Item, Command.Group, and Command.Empty — that manages global query state, keyboard navigation (arrow up/down), focus trapping, and escape-key dismissal for you. Each Command.Item has a stable value prop and onSelect callback; Command.Input auto-focuses and syncs typing to the shared query; items auto-filter based on value matching the query.

Import from @particle-academy/react-fancy, bind open and onClose to your state, and compose: <Command open={isOpen} onClose={() => setIsOpen(false)}><Command.Input /><Command.List><Command.Item value="copy" onSelect={handleCopy}>Copy</Command.Item></Command.List></Command>. Keyboard navigation and Escape handling work out of the box; items vanish automatically if they don't match the query.