Command
Command palette for searching and executing actions. Supports keyboard navigation and dialog mode.
Live Demo
No results found.
📅 Calendar
🔍 Search
⚙️ Settings
📄 New File⌘N
📂 Open⌘O
Command Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Command content (Input, List, Groups, Items) |
value | string | — | Controlled search value |
onValueChange | (value: string) => void | — | Callback when search changes |
CommandDialog Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controls dialog visibility |
onOpenChange | (open: boolean) => void | — | Callback when open state changes |
Usage
import {
Command, CommandDialog, CommandInput, CommandList,
CommandEmpty, CommandGroup, CommandItem,
CommandSeparator, CommandShortcut,
} from '@ghiberti85/ui'
// Inline panel
<Command>
<CommandInput placeholder="Search..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Actions">
<CommandItem value="new">New File <CommandShortcut>⌘N</CommandShortcut></CommandItem>
</CommandGroup>
</CommandList>
</Command>
// Dialog palette (⌘K)
const [open, setOpen] = useState(false)
<CommandDialog open={open} onOpenChange={setOpen}>
<CommandInput placeholder="Search..." />
<CommandList>
<CommandItem value="home">Home</CommandItem>
</CommandList>
</CommandDialog>