Shadcn Command Components

Shadcn Command Component

The Shadcn Command component is a searchable list of actions that users filter by typing and run with the keyboard. It is the building block behind command palettes like the Cmd + K menus in modern apps, and it works just as well inline for searchable lists of files, people or settings.

Whether you need a Cmd + K palette with shortcut hints, a search that switches between Files, People and Commands with filter tabs, or a two pane layout with a profile panel, the shadcn command examples here start from the same parts. Fuzzy filtering, sorting and keyboard selection come from cmdk, the styling from shadcn/ui, React and Tailwind CSS, and the variants that add avatars, dropdown menus or toggle groups work with both Radix UI and Base UI setups.

What is the Shadcn Command Component?

A command menu combines a search input with a list of items. As the user types, cmdk scores every item against the query, hides the ones that do not match and sorts the rest by relevance. One item is always highlighted, the arrow keys move the highlight and Enter runs it. Groups keep related items together and hide themselves when none of their items match, and an empty state appears when nothing matches at all.

Use Command when users need to find one action among many by name. For picking a value in a form field, a Combobox is the better fit because it shows the selected value in the trigger. For a short list of actions that users browse rather than search, a Dropdown Menu is simpler, and for a fixed list of options with no search at all, use a Select.

Anatomy of the Shadcn Command

9 Shadcn Command Variants

Each command variant listed here is previewed live at the top of this page, together with its source code and install command.

• Basic search list: A search input over a list of categories with icons and an empty state, the simplest starting point.
• Grouped with shortcuts: Navigation and action groups with headings, icons and keyboard shortcut hints on each item.
• Files, users and settings: Controlled search over files, people with avatars and roles, and settings categories divided by separators.
• Quick actions: Grouped create and upload actions such as New Email or Upload Image, each with its own shortcut.
• Filter tabs: A toggle group under the input switches between All, Files, People and Commands, with AI prompts and recent searches by default.
• Footer: A custom header with a filter icon and a close button, plus a footer that lists the navigation keys.
• Item detail (Pro): A two pane layout: a searchable list of people on the left and a profile panel with actions for the selected person on the right.

How to Install the Shadcn Command Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a command variant by its name:

npx shadcn@latest add @shadcnuikit/command1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Command Component

Import the parts from your components/ui folder. Put groups and items inside CommandList, and handle each action in onSelect. Filtering works automatically.

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

export function QuickActions() {
  return (
    <Command className="max-w-md rounded-lg border">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem onSelect={() => console.log("new-project")}>
            New project
            <CommandShortcut>⌘N</CommandShortcut>
          </CommandItem>
          <CommandItem keywords={["team", "people"]}>
            Invite members
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem>Billing</CommandItem>
          <CommandItem>Notifications</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Why Use the Shadcn Command Component

• Search built in: cmdk filters and sorts items as the user types, with no search logic to write for small and medium lists.
• Keyboard first: Arrow keys, Enter, Home and End work out of the box, so power users never need the mouse.
• Composable: The same parts work inline, in a popover or in CommandDialog, so one list can power several surfaces.
• Any item content: Items accept icons, avatars, descriptions and shortcuts, since they are plain React children.
• Themeable: Colors, rounding and the highlighted row are Tailwind classes driven by your theme variables.

Common Command Use Cases

• Command palettes: A global Cmd + K menu for navigation, actions and settings in dashboards and editors.
• Global search: One place to search pages, documents, people and recent items across an app.
• Comboboxes and pickers: The searchable list inside assignee pickers, tag selectors and country pickers.
• Settings finder: Jump straight to a setting by name instead of browsing through tabs.
• Quick create menus: Start a new email, event, document or upload from a single searchable list.
• Directories: Searchable lists of team members or customers with a detail panel next to the results.

Customizing the Shadcn Command

cmdk sets data-selected and data-disabled to "true" or "false" on every item. The data-selected: and data-disabled: variants from shadcn/tailwind.css ignore the "false" value, so a class such as data-selected:bg-accent only styles the highlighted row. Group headings are rendered with a cmdk-group-heading attribute that you can target from the group's className. To take over filtering, for example for server side search, set shouldFilter={false} on Command and render only the results you want. Colors follow your theme, which you can build with the free Theme Generator.

Opening the command as a palette with a keyboard shortcut:

const [open, setOpen] = useState(false)

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

return (
  <CommandDialog open={open} onOpenChange={setOpen}>
    <CommandInput placeholder="Search..." />
    <CommandList>...</CommandList>
  </CommandDialog>
)

Command Accessibility and Keyboard Support

cmdk renders the input as a combobox and the list as a listbox, and links them with aria-controls and aria-activedescendant. Focus stays in the input while the highlight moves through the options, so screen readers announce the active item without the user leaving the search field. Group headings label their groups.

CommandDialog includes a visually hidden title and description, which you can change with the title and description props. Keep item labels short and unique, and always render CommandEmpty so users know when a search found nothing.

Command Best Practices

• Always render CommandEmpty so an empty search gives clear feedback.
• Add keywords to items whose label does not contain the word users will search for, such as "invoices" for Billing.
• Group items by type and keep the most used actions in the first group.
• Show shortcuts with CommandShortcut only when the shortcut actually works in your app.
• For large or remote data sets, set shouldFilter={false} and filter on the server.
• Close the dialog after an action runs, unless the action is meant to be repeated.

Components Related to Command

Shadcn Command FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.