Command

<VStack className="w-full max-w-md mx-auto">
  <Command className="rounded-xl border shadow-md">
    <CommandInput placeholder="Type a command or search..." />
    <CommandList>
      <CommandEmpty>No results found.</CommandEmpty>
      <CommandGroup heading="Suggestions">
        <CommandItem>
          <Calendar className="mr-2" />
          <span>Calendar</span>
        </CommandItem>
        <CommandItem>
          <Smile className="mr-2" />
          <span>Search Emoji</span>
        </CommandItem>
        <CommandItem>
          <Calculator className="mr-2" />
          <span>Calculator</span>
        </CommandItem>
      </CommandGroup>
      <CommandSeparator />
      <CommandGroup heading="Settings">
        <CommandItem>
          <User className="mr-2" />
          <span>Profile</span>
          <CommandShortcut>⌘P</CommandShortcut>
        </CommandItem>
        <CommandItem>
          <CreditCard className="mr-2" />
          <span>Billing</span>
          <CommandShortcut>⌘B</CommandShortcut>
        </CommandItem>
        <CommandItem>
          <Settings className="mr-2" />
          <span>Settings</span>
          <CommandShortcut>⌘S</CommandShortcut>
        </CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</VStack>

<VStack className="w-full max-w-md mx-auto">
  <Command className="rounded-xl border shadow-md">
    <CommandInput placeholder="Search..." />
    <CommandList>
      <CommandEmpty>No results found.</CommandEmpty>
      <CommandGroup heading="Actions">
        <CommandItem>New File</CommandItem>
        <CommandItem>New Folder</CommandItem>
        <CommandItem>New Window</CommandItem>
      </CommandGroup>
      <CommandSeparator />
      <CommandGroup heading="Recent">
        <CommandItem>project-alpha.tsx</CommandItem>
        <CommandItem>components.json</CommandItem>
        <CommandItem>styles.css</CommandItem>
      </CommandGroup>
      <CommandSeparator />
      <CommandGroup heading="Help">
        <CommandItem>Documentation</CommandItem>
        <CommandItem>Keyboard Shortcuts</CommandItem>
        <CommandItem>Report Issue</CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</VStack>

<VStack className="w-full max-w-md mx-auto">
  <Command className="rounded-xl border shadow-md">
    <CommandInput placeholder="Type a command..." />
    <CommandList>
      <CommandEmpty>No results found.</CommandEmpty>
      <CommandGroup heading="File">
        <CommandItem>
          New Tab
          <CommandShortcut>⌘T</CommandShortcut>
        </CommandItem>
        <CommandItem>
          New Window
          <CommandShortcut>⌘N</CommandShortcut>
        </CommandItem>
        <CommandItem>
          Close Tab
          <CommandShortcut>⌘W</CommandShortcut>
        </CommandItem>
      </CommandGroup>
      <CommandSeparator />
      <CommandGroup heading="Edit">
        <CommandItem>
          Undo
          <CommandShortcut>⌘Z</CommandShortcut>
        </CommandItem>
        <CommandItem>
          Redo
          <CommandShortcut>⇧⌘Z</CommandShortcut>
        </CommandItem>
        <CommandItem>
          Find
          <CommandShortcut>⌘F</CommandShortcut>
        </CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</VStack>

<HStack justify="center" className="w-full">
  <Command className="rounded-xl border shadow-lg w-full max-w-md">
    <CommandInput placeholder="Type a command or search..." />
    <CommandList>
      <CommandEmpty>No results found.</CommandEmpty>
      <CommandGroup heading="Suggestions">
        <CommandItem>
          <Calendar className="mr-2" />
          Calendar
        </CommandItem>
        <CommandItem>
          <Smile className="mr-2" />
          Search Emoji
        </CommandItem>
        <CommandItem>
          <Calculator className="mr-2" />
          Calculator
        </CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</HStack>

<VStack className="w-full max-w-md mx-auto">
  <Command className="rounded-xl border shadow-md">
    <CommandInput placeholder="Search for anything..." />
    <CommandList>
      <CommandEmpty>
        <div className="py-6 text-center">
          <p className="text-muted-foreground">No results found.</p>
          <p className="text-xs text-muted-foreground mt-1">Try a different search term.</p>
        </div>
      </CommandEmpty>
    </CommandList>
  </Command>
</VStack>