Neumorphism UI

Command

Use Command for a searchable list of actions or destinations that people can quickly choose with the keyboard.

Preview

Searchable city commands

Filter four city items, select one to display its local result, and inspect the empty state and shortcut labels.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/command

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Compose CommandInput and CommandList, then group CommandItem controls and provide CommandEmpty. Connect onSelect to an actual action; shortcut labels do not register shortcuts themselves.

"use client";

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

export default function Example() {
  const [selection, setSelection] = useState("No command selected.");
  return (
    <div>
      <Command>
        <CommandInput placeholder="Search commands" />
        <CommandList>
          <CommandEmpty>No commands found.</CommandEmpty>
          <CommandGroup heading="Navigation">
            <CommandItem value="projects" onSelect={() => setSelection("Projects selected.")}>Projects</CommandItem>
            <CommandItem value="settings" onSelect={() => setSelection("Settings selected.")}>Settings</CommandItem>
          </CommandGroup>
        </CommandList>
      </Command>
      <p role="status">{selection}</p>
    </div>
  );
}

API Reference

Preserves cmdk filtering, active-item state, and keyboard navigation while rendering the input as inset and the active item as pressed. CommandDialog composes it with the existing Dialog.

ComponentPropTypeDefaultDescription
CommandshouldFilterbooleantrueControls whether cmdk applies its built-in search filtering.
Commandvalue / onValueChangestring / (value: string) => void—Controls the currently active item.
CommandInputvalue / onValueChangestring / (value: string) => void—Controls the search query or leaves the input uncontrolled.
CommandItemvalue / onSelectstring / (value: string) => void—Defines the searchable value and selection callback for an item.
CommandItemdisabledbooleanfalseKeeps an item in the result model while preventing selection.

Accessibility

  • 01

    Give CommandInput a placeholder or aria-label that describes the search purpose.

  • 02

    Arrow keys move the active item and Enter selects it; retain the visible focus treatment.

  • 03

    Provide an explicit CommandEmpty state when filtering returns no items.