A command menu with shadcn

Short answer: npx shadcn@latest add command installs a wrapper around cmdk; put Command inside CommandDialog, open it with ⌘K, and give every CommandItem a unique value. The library handles filtering and keyboard navigation.

The parts of the menu

This component is not a dropdown: it is a list of commands with a search field. Every part has one job, and cmdk applies the ARIA roles, not your CSS.

Opening with ⌘K, without surprises

The shortcut is registered on document inside an effect. preventDefault() matters: without it, Ctrl+K on Windows and ⌘K on macOS trigger the browser search. The same gesture has to work inside a text field too, so do not filter on event.target.

"use client";

import { useEffect, useState } from "react";
import {
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command";

export function CommandMenu() {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    function onKeyDown(event: KeyboardEvent) {
      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
        event.preventDefault();
        setOpen((value) => !value);
      }
    }
    document.addEventListener("keydown", onKeyDown);
    return () => document.removeEventListener("keydown", onKeyDown);
  }, []);

  return (
    
      
      
        Nessun risultato.
        
           setOpen(false)}>
            Dashboard
            G D
          
           setOpen(false)}>
            Impostazioni
          
        
        
        
           setOpen(false)}>
            Esporta CSV
          
        
      
    
  );
}

The filter: where it goes wrong

cmdk compares what you type against each entry's value. Without value it reads the node text: two entries called “Open” produce two identical results and selection turns ambiguous. The fix costs one line: a descriptive value, with the visible label left free.

When entries arrive from a remote search, the local filter fights the server results: you type “re” and cmdk hides the entries the server has just returned. In that case pass shouldFilter={false} and own the list, the loading state and the empty state yourself.

  
  
    {loading && Caricamento…}
    {!loading && results.length === 0 && (
      Nessun utente trovato.
    )}
    
      {results.map((user) => (
         pick(user)}>
          {user.name}
        
      ))}
    
  

Accessibility

shadcn's CommandDialog accepts title and description and renders them in a hidden header, because a Radix Dialog without a title breaks assisted navigation. If you build the dialog by hand, add DialogTitle: the case is covered in DialogContent requires DialogTitle. The list is already fine: arrows, Home, End and Enter work without extra code.

A named limitation

cmdk filters in memory, in the browser. With a few hundred entries it feels instant; with tens of thousands the cost lands on the main thread and a remote filter stops being optional. The catalogue, measured on 1 November 2026, holds 19 command blocks: every one of them assumes a short, local list.

Where to continue

In the catalogue you find a command menu block, the command component record from Origin UI and the shadcn library. For the setup read what shadcn/ui is and how to add a shadcn block; the catalogue comparison is in 21st, shadcnspace and the others.