Command

A command palette for quick actions and navigation.

cmdk.paco.me

Basic

Command Input

<div className="w-full max-w-sm">
  <Component>
    <Component placeholder="Type a command or search..." />
    <Component>
      <Component>
        No results found.
      </Component>
      <Component heading="Suggestions">
        <Component>
          <span>
            Calendar
          </span>
        </Component>
        <Component>
          <span>
            Search Contacts
          </span>
          <CommandShortcut>
            ⌘F
          </CommandShortcut>
        </Component>
        <Component>
          <span>
            Create Note
          </span>
          <CommandShortcut>
            ⌘N
          </CommandShortcut>
        </Component>
      </Component>
    </Component>
  </Component>
</div>

Dialog

Command Dialog

<div className="flex flex-col items-center gap-4">
  <Button onClick={() => {}} variant="subtle">
    Open Command Menu
  </Button>
  <c open={false} onOpenChange={() => {}}>
    <Component placeholder="Type a command or search..." />
    <Component>
      <Component>
        No results found.
      </Component>
      <Component heading="Suggestions">
        <Component>
          <span>
            Calendar
          </span>
        </Component>
        <Component>
          <span>
            Search Contacts
          </span>
          <CommandShortcut>
            ⌘F
          </CommandShortcut>
        </Component>
        <Component>
          <span>
            Create Note
          </span>
          <CommandShortcut>
            ⌘N
          </CommandShortcut>
        </Component>
      </Component>
      <Component heading="Settings">
        <Component>
          <span>
            Profile
          </span>
          <CommandShortcut>
            ⌘P
          </CommandShortcut>
        </Component>
        <Component>
          <span>
            Account
          </span>
        </Component>
        <Component>
          <span>
            Logout
          </span>
          <CommandShortcut>
            ⌘L
          </CommandShortcut>
        </Component>
      </Component>
    </Component>
  </c>
</div>