Navigation & disclosure@neumorphism-ui/command

Command

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.

@neumorphism-ui/command

Registry JSON

Preview

Saved state

Installation

npx shadcn@latest add @neumorphism-ui/command

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

"use client";
import * as React from "react";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command";

Example

export default function Example() {
  const [selected, setSelected] = React.useState("No command selected.");
  return <div className="grid w-full max-w-md gap-3">
    <Command>
      <CommandInput placeholder="Search commands" />
      <CommandList>
        <CommandEmpty>No matching commands.</CommandEmpty>
        <CommandGroup heading="Navigation">
          <CommandItem value="dashboard" onSelect={() => setSelected("Dashboard")}>Dashboard<CommandShortcut>⌘D</CommandShortcut></CommandItem>
          <CommandItem value="settings" onSelect={() => setSelected("Settings")}>Settings<CommandShortcut>⌘,</CommandShortcut></CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
    <p role="status" className="text-sm text-[var(--muted-foreground)]">{selected}</p>
  </div>;
}

API Reference

Component	Prop	Type	Default	Description
`Command`	`shouldFilter`	`boolean`	`true`	Controls whether cmdk applies its built-in search filtering.
`Command`	`value / onValueChange`	`string / (value: string) => void`	`—`	Controls the currently active item.
`CommandInput`	`value / onValueChange`	`string / (value: string) => void`	`—`	Controls the search query or leaves the input uncontrolled.
`CommandItem`	`value / onSelect`	`string / (value: string) => void`	`—`	Defines the searchable value and selection callback for an item.
`CommandItem`	`disabled`	`boolean`	`false`	Keeps an item in the result model while preventing selection.