Command
A fast, composable command palette with filtering, keyboard navigation, and optional dialog mode — built on cmdk.
Install
npx shadcn@latest add https://atomx.acau.net/r/command.jsonUsage
Command wraps cmdk's Command primitive. Use CommandInput for the search field, CommandList to contain results, CommandGroup for labelled sections, and CommandItem for individual entries. CommandEmpty is displayed when no items match the query.
<Command>
<CommandInput placeholder="Type a command..." />
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Actions">
<CommandItem>New file</CommandItem>
<CommandItem>Open settings</CommandItem>
</CommandGroup>
</CommandList>
</Command>For a full-screen modal palette, wrap everything in CommandDialog (which composes Dialog + Command).
Preview
Dialog ⌘D
Props
Command extends React.ComponentPropsWithoutRef<typeof CommandPrimitive>.
| Component | Notable props |
|---|---|
Command | filter — custom filter function (value, search) => number. |
CommandInput | Standard <input> props; placeholder. |
CommandList | Scrollable container for groups and items. |
CommandGroup | heading — section label string. |
CommandItem | value — the string used for filtering; onSelect — called when selected. |
CommandEmpty | Rendered when CommandList has no visible items. |
CommandSeparator | Horizontal rule between groups. |
CommandShortcut | Inline span for keyboard shortcut hints. |
Combobox
A searchable single-select input composed from Popover and Command — atomx ships it as a ready-to-use block so you get a consistent API instead of assembling the primitives yourself.
Context Menu
A right-click context menu built on Radix UI's ContextMenu primitive, with items, labels, separators, checkboxes, and sub-menus.