Components/Navigation/Command
COMPONENT41.41

Command

Searchable action list — palette in a dialog or inline card. Typing filters, arrows rove, Enter selects.

INSTALL

1pnpm dlx @sayagodev/mo add command

Or import the files from the package (no copy):

1import "@sayagodev/mo/css/command.css";2import "@sayagodev/mo/js/command.js";

Also copied as dependency: shared.css

EXAMPLES

Palette
Suggestions
Settings
↑↓ Navigate ↵ Select esc Close
Basic
Suggestions
Scrollable
Navigation
Actions
View
Account
Tools
↑↓ Navigate ↵ Select esc Close
Groups & scroll
Suggestions
Settings
↑↓ Navigate ↵ Select esc Close
Shortcuts
Settings
↑↓ Navigate ↵ Select esc Close
Demo
Suggestions
Settings

USAGE

1<button command="show-modal" commandfor="cmd1">Open…</button>2 3<mo-command>4  <dialog class="command" id="cmd1">5    <input data-command-input placeholder="Type a command…" />6    <div data-command-list>7      <div data-command-empty hidden>No results found.</div>8      <section data-command-groups>9        <div data-command-label>Suggestions</div>10        <button role="option">Calendar</button>11        <button role="option">Search <kbd>⌘S</kbd></button>12      </section>13    </div>14  </dialog>15</mo-command>

API

NAMEKINDDESCRIPTION
<mo-command>elementFiltering, virtual roving, select/close events
dialog.command / bare hostelementPalette (modal) or inline card flavor
[data-command-groups] + [data-command-label]attributeSections that collapse when empty
mo-command-selectelementEvent, detail { value } on choose

FILES

src/css/command.csssrc/js/command.jsdep: src/css/shared.css
Install:mo add command

THEMING · PLAYGROUND

This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.

Tokens & hooks — edit live
Global tokens
--accent--accent-foreground--border--destructive--foreground--muted--muted-foreground--popover--popover-foreground--radius--ring
Component hooks
--mo-command-list-height--mo-command-radius--mo-command-width--mo-dialog-max-width

Preview

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.