NAMCHE UI

Command

A filterable command list, used inline or inside a dialog as a keyboard-driven command palette.

Command Palette

Search for a command to run...

Install

pnpm dlx shadcn@latest add @namche/command

Usage

import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut } from '@/components/ui/command';

<CommandDialog open={open} onOpenChange={setOpen}>
  <CommandInput placeholder="Search actions, clusters, regions…" />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Actions">
      <CommandItem>
        Deploy new cluster
        <CommandShortcut>⌘D</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>

Command (built on cmdk) can also be rendered inline, without a dialog — drop CommandInput/CommandList/CommandGroup/CommandItem straight into a Command wrapper instead of CommandDialog for an embedded search list. CommandDialog wires that same content into the Dialog primitive with a sr-only title/description for accessibility. Wire your own keyboard shortcut (commonly ⌘K) to toggle open — the component doesn't register one itself.

On this page