Command
@/components/kamod-ui/command
Installation
Use `@kamod-ch/ui` — no `cmdk` dependency. For modal palettes, wrap with `CommandDialog` (`Dialog` + padded `DialogContent`).
pnpm add @kamod-ch/uiUsage
`CommandItem` requires a `value` string used for filtering (case-insensitive substring). Use `onSelect` or `onClick` for actions. `CommandEmpty` appears only when the query is non-empty and no item matches. `CommandList` measures matches after layout. Inside `CommandDialog`, drop the inner `Command` border: `class="rounded-none border-0 shadow-none"`.
import { Command } from "@/components/kamod-ui/command";<Command />Inline demo
Groups, separator, shortcuts, icons, and disabled row — aligned with the shadcn overview example.
Dialog: basic
`CommandDialog` + controlled `open` / `onOpenChange`.
Dialog: shortcuts
Settings group with `CommandShortcut` trailing hints.
Dialog: groups
Suggestions + Settings with `CommandSeparator`.
Dialog: scrollable
Many items; `CommandList` uses `max-h-80` for scroll.
API Reference
Props, slots and variants for this component.
Command
Command component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| CommandItem value | string | required (filter key) |
| CommandItem onSelect | (value: string) => void | undefined |
| CommandGroup heading | string | undefined |
| CommandDialog open / onOpenChange | boolean + callback | — |
| CommandDialog contentClass | string | p-0 gap-0 sm:max-w-lg |
Accessibility Notes
Provide a visible label or `aria-label` on the input; keep shortcut text as supplementary. For production, consider roving `tabindex` / arrow-key navigation (cmdk parity) — current focus is click and type-to-filter.