Command

No results found.

Suggestions

Calendar

Search Emoji

Calculator

Settings

Profile

Billing

Settings

---
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
---

<Command class="w-full max-w-sm rounded-md border">
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search Emoji</CommandItem>
      <CommandItem>Calculator</CommandItem>
    </CommandGroup>
    <CommandGroup heading="Settings">
      <CommandItem>Profile</CommandItem>
      <CommandItem>Billing</CommandItem>
      <CommandItem>Settings</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Installation

To install the command component, run the following command:

pnpm dlx shadcn@latest add @fulldev-ui/command

Usage

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command"

<Command>
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search Emoji</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Examples

Dialog

You can compose Command with a Dialog to create a command menu dialog.

Open Command Menu

Press ⌘K

---
import { Button } from "@/components/ui/button"
import { CommandDialog } from "@/components/ui/command"
---

<div class="flex items-center justify-center gap-4">
  <Button variant="outline"> Open Command Menu </Button>
  <p class="text-muted-foreground text-sm">
    Press <kbd class="bg-muted rounded border px-2 py-1 text-xs font-semibold"
      >⌘K</kbd
    >
  </p>
</div>

<script>
  const dialog = document.querySelector("[data-slot='command-dialog']")
  const trigger = document.querySelector("button")

  if (trigger && dialog) {
    trigger.addEventListener("click", () => {
      dialog.showModal?.()
    })
  }

  document.addEventListener("keydown", (e) => {
    if ((e.metaKey || e.ctrlKey) && e.key === "k") {
      e.preventDefault()
      dialog?.showModal?.()
    }
  })
</script>