A command palette / filterable list adapted from shadcn/ui (new-york-v4).
shadcn builds this on the cmdk primitive; we reimplement the essential
behaviour with a small LiveView hook. The command/1 root carries the
ShadixCommand hook (assets/ts/command.ts), which on mount focuses the search
input, filters the [role="option"] items by the input's text (matching each
option's textContent, toggling the Tailwind hidden class), shows the
command_empty/1 slot when nothing matches, and provides arrow/Home/End
keyboard navigation over the visible options with Enter activating the
focused option via .click().
Ids are derived from the required :id: the input carries data-command-search
so the hook can locate it from the root, and the empty/list slots are matched by
their data-slot attributes.
Caller-supplied class is appended last; Tailwind cascade layers ensure it wins
over the defaults.
Summary
Functions
The command root: a rounded, bordered panel hosting the ShadixCommand hook.
The empty state, shown by the hook (via JS.show/JS.hide) when no options
match the search. Hidden by default with the Tailwind hidden class.
A labelled group of items. :heading renders a small muted label above the
items.
The search input. :id is the command's id; the input gets ##{id}-input,
a data-command-search marker the hook keys off, and a leading search icon.
A selectable option. :value is the option's value (mirrored to data-value);
wire phx-click (or any handler) via :rest.
A scrollable container holding the command groups, items, and empty state.
A horizontal separator between command sections.
A trailing keyboard-shortcut hint within a command item.
Functions
The command root: a rounded, bordered panel hosting the ShadixCommand hook.
Compose command_input/1, command_list/1 (with command_group/1,
command_item/1, command_empty/1, command_separator/1) inside its
inner_block.
Attributes
id(:string) (required)class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
The empty state, shown by the hook (via JS.show/JS.hide) when no options
match the search. Hidden by default with the Tailwind hidden class.
Attributes
class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
A labelled group of items. :heading renders a small muted label above the
items.
Attributes
heading(:string) - Defaults tonil.class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
The search input. :id is the command's id; the input gets ##{id}-input,
a data-command-search marker the hook keys off, and a leading search icon.
Attributes
id(:string) (required)placeholder(:string) - Defaults to"Type a command or search...".class(:string) - Defaults tonil.- Global attributes are accepted.
A selectable option. :value is the option's value (mirrored to data-value);
wire phx-click (or any handler) via :rest.
Attributes
value(:string) - Defaults tonil.class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
A scrollable container holding the command groups, items, and empty state.
Attributes
class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
A horizontal separator between command sections.
Attributes
class(:string) - Defaults tonil.- Global attributes are accepted.
A trailing keyboard-shortcut hint within a command item.
Attributes
class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)