Component · C-065

CommandPalette

Keyboard-first global search: type to filter, arrows to move, Enter to run and Escape to close. Focus always returns to the trigger.

Install

Install koten-theme first when the project has no Koten tokens yet.

npx shadcn@latest add https://koten.codehive.com.co/r/command-palette.json

Requirements

• Portaled popup: The palette mounts in BaseDialog.Portal. Do not nest it in containers with overflow or transform, because the backdrop must cover the window.
• Controlled state (open / onOpenChange): The palette does not open by itself: it takes open and onOpenChange, and you own the state. When it closes with Escape or on select, focus returns to the trigger.

Accessibility

• The field is a combobox with aria-controls, aria-autocomplete and aria-activedescendant; the list is a listbox.
• The dialog traps focus and returns it to the trigger on close, including with Escape.
• Arrows, Home/End and PageUp/PageDown move; Enter runs the active command.
• The empty state and the chosen result are conveyed as text, not only with colour.

Read the whole page

• Markdown page
• Agent index (llms.txt)
• Full documentation (llms-full.txt)

Koten UI · llms.txt · llms-full.txt · Markdown