Command Palette

@allem-ui/command

Spotlight-style command palette with keyboard navigation, grouped results, and shortcut badges. Opens with ⌘K.

Installation

npm install @allem-ui/command

Add the @source directive to your CSS so Tailwind generates the component classes:

@source "@allem-ui/command";

A flat list of commands without groups. Click the button to open.

Click the button or press ⌘K to open. Items are organized into groups with keyboard shortcut badges.

Feature	Description
Keyboard navigation	↑↓ to navigate items, ↵ to select, Esc to close. Wraps around at edges.
Shortcuts footer	Built-in footer showing navigation hints (↑↓ navigate, ↵ select, esc close).
Backdrop dismiss	Clicking outside the palette closes it automatically.
Scroll lock	Body scroll is locked while the palette is open.
Auto-focus	Input is automatically focused when the palette opens.
Clear button	An × button appears in the input when it has a value.
Auto-scroll	Active item scrolls into view during keyboard navigation.
Animations	Fade-in and slide-up entrance animations.
Accessibility	Full ARIA support — role="dialog", aria-modal, aria-selected on items, role="listbox".

Prop	Type	Default	Description
open*	boolean	—	Whether the palette is open
onOpenChange*	(open: boolean) => void	—	Callback when open state changes
className	string	—	Additional CSS classes
children*	ReactNode	—	CommandInput, CommandList, etc.

Prop	Type	Default	Description
value*	string	—	Current input value
onValueChange*	(value: string) => void	—	Callback when input changes
placeholder	string	"Type a command or search..."	Input placeholder text
className	string	—	Additional CSS classes

Prop	Type	Default	Description
onSelect*	() => void	—	Called when item is selected
icon	ReactNode	—	Icon on the left
shortcut	string	—	Keyboard shortcut badge
disabled	boolean	false	Disable the item
active	boolean	false	Whether the item is currently active
className	string	—	Additional CSS classes

Prop	Type	Default	Description
heading*	string	—	Group heading text
className	string	—	Additional CSS classes
children*	ReactNode	—	CommandItem elements

Prop	Type	Default	Description
className	string	—	Additional CSS classes
children*	ReactNode	—	CommandGroup, CommandItem, or CommandEmpty elements

Prop	Type	Default	Description
className	string	—	Additional CSS classes
children	ReactNode	"No results found."	Custom empty state message

Hook that manages open state and registers a global ⌘K (Ctrl+K) keyboard shortcut.

Prop	Type	Default	Description
shortcut	string	"k"	Key to combine with ⌘/Ctrl to toggle

Prop	Type	Default	Description
isOpen	boolean	—	Current open state
open	() => void	—	Open the palette
close	() => void	—	Close the palette
toggle	() => void	—	Toggle the palette
setIsOpen	(value: boolean) => void	—	Set open state directly