Command

import {
  Command,
  CommandDialog,
  CommandDialogContent,
  CommandDialogTrigger,
  CommandEmpty,
  CommandInput,
  CommandItem,
  CommandList,
  CommandPanel,
} from "@/components/ui/command"
import { Button } from "@/components/ui/button"

const items = [
  { value: "linear", label: "Linear" },
  { value: "figma", label: "Figma" },
  { value: "slack", label: "Slack" },
]
 
<CommandDialog>
  <CommandDialogTrigger render={<Button mode="stroke" />}>
    Open Command Palette
  </CommandDialogTrigger>
 
  <CommandDialogContent>
    <Command items={items}>
      <CommandInput placeholder="Search..." />
      <CommandPanel>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandList>
          {(item) => (
            <CommandItem key={item.value} value={item}>
              {item.label}
            </CommandItem>
          )}
        </CommandList>
      </CommandPanel>
    </Command>
  </CommandDialogContent>
</CommandDialog>