1// Via framework (recommended)
2import { Command, CommandItem, CommandGroup, CommandSeparator } from '@hua-labs/hua';
3// Or direct import
4// import { Command, CommandItem, CommandGroup, CommandSeparator } from '@hua-labs/ui/interactive';
5 
6const [open, setOpen] = useState(false);
7 
8<Button onClick={() => setOpen(true)}>
9  Open Command Palette
10</Button>
11 
12<Command open={open} onOpenChange={setOpen}>
13  <CommandItem icon={<File />} onSelect={() => console.log('New File')}>
14    New File
15  </CommandItem>
16  <CommandItem icon={<FolderOpen />} onSelect={() => console.log('Open')}>
17    Open...
18  </CommandItem>
19  <CommandSeparator />
20  <CommandItem icon={<Gear />} onSelect={() => console.log('Settings')}>
21    Settings
22  </CommandItem>
23</Command>

1<Command open={open} onOpenChange={setOpen}>
2  <CommandGroup heading="File">
3    <CommandItem icon={<Plus />}>New File</CommandItem>
4    <CommandItem icon={<FolderOpen />}>Open...</CommandItem>
5  </CommandGroup>
6  <CommandSeparator />
7  <CommandGroup heading="Edit">
8    <CommandItem icon={<Copy />}>Copy</CommandItem>
9    <CommandItem icon={<Trash />} disabled>Delete</CommandItem>
10  </CommandGroup>
11</Command>

1const [searchValue, setSearchValue] = useState('');
2 
3const items = [
4  { label: 'Home', icon: <House /> },
5  { label: 'Settings', icon: <Gear /> },
6  { label: 'Profile', icon: <User /> },
7];
8 
9const filtered = items.filter(item =>
10  item.label.toLowerCase().includes(searchValue.toLowerCase())
11);
12 
13<Command
14  open={open}
15  onOpenChange={setOpen}
16  searchValue={searchValue}
17  onSearchChange={setSearchValue}
18  placeholder="Search commands..."
19>
20  {filtered.length === 0 ? (
21    <CommandEmpty>No results found</CommandEmpty>
22  ) : (
23    filtered.map(item => (
24      <CommandItem key={item.label} icon={item.icon}>
25        {item.label}
26      </CommandItem>
27    ))
28  )}
29</Command>