<Command.Root>
  <Command.Input />
  <Command.List>
    <Command.Empty />
    <Command.Group>
      <Command.Item />
    </Command.Group>
    <Command.Separator />
    <Command.Group>
      <Command.Item />
    </Command.Group>
  </Command.List>
</Command.Root>

<Command.Dialog>
  <Command.Input />
  <Command.List>
    <Command.Group>
      <Command.Item />
    </Command.Group>
  </Command.List>
</Command.Dialog>

<Command.Root>
  <Command.Input placeholder="Type a command..." />
  <Command.List>
    <Command.Empty>No results found.</Command.Empty>
    <Command.Group heading="Actions">
      <Command.Item>New File</Command.Item>
      <Command.Item>Copy Link</Command.Item>
      <Command.Item>Share Document</Command.Item>
    </Command.Group>
  </Command.List>
</Command.Root>

const [open, setOpen] = useState(false)

return (
  <>
    <Button onClick={() => setOpen(true)}>
      Open Command Menu
    </Button>
    <Command.Dialog open={open} onOpenChange={setOpen}>
      <Command.Input />
      <Command.List>
        <Command.Group heading="Suggestions">
          <Command.Item onSelect={() => console.log('selected')}>
            Command palette
          </Command.Item>
        </Command.Group>
      </Command.List>
    </Command.Dialog>
  </>
)

<Command.Root>
  <Command.Input placeholder="Search icons..." />
  <Command.List>
    <Command.Group heading="Icons">
      <Command.Item>
        <HomeIcon className="mr-2 size-4" />
        Home
      </Command.Item>
      <Command.Item>
        <SettingsIcon className="mr-2 size-4" />
        Settings
      </Command.Item>
      <Command.Item>
        <UserIcon className="mr-2 size-4" />
        Profile
      </Command.Item>
    </Command.Group>
  </Command.List>
</Command.Root>

<Command.Root>
  <Command.Input placeholder="Search commands..." />
  <Command.List>
    <Command.Group heading="Editor">
      <Command.Item>
        <div className="flex items-center justify-between w-full">
          <div className="flex items-center">
            <FileIcon className="mr-2 size-4" />
            New File
          </div>
          <span className="text-xs text-muted">⌘N</span>
        </div>
      </Command.Item>
      <Command.Item>
        <div className="flex items-center justify-between w-full">
          <div className="flex items-center">
            <SaveIcon className="mr-2 size-4" />
            Save
          </div>
          <span className="text-xs text-muted">⌘S</span>
        </div>
      </Command.Item>
    </Command.Group>
  </Command.List>
</Command.Root>

<Command.Root>
  <Command.Input placeholder="Search..." />
  <Command.List>
    {loading ? (
      <div className="p-4 text-center">
        <Spinner className="size-4" />
        <div className="text-sm text-muted">Loading results...</div>
      </div>
    ) : (
      <Command.Group heading="Results">
        <Command.Item>Result 1</Command.Item>
        <Command.Item>Result 2</Command.Item>
        <Command.Item>Result 3</Command.Item>
      </Command.Group>
    )}
  </Command.List>
</Command.Root>