Mica / command example

A place to find and do.

One command surface, inline or inside a native dialog. Quiet groups, descriptive rows, and keyboard selection.

Inline command surface

Go to

Theme builderMake Mica your own.ListsCollections with a lighter touch.

Workspace

Preferences

Actions in this demo stay local.

Command markup

<m-command-palette>
  <header>
    <input data-command-input
      aria-label="Find a command" hidden>
  </header>
  <m-command-list dividers aria-label="Commands">
    <m-command-group>
      <h3>Workspace</h3>
      <button data-command-item
        data-keywords="add new">
        Create project
      </button>
      <a data-command-item href="/settings">
        Settings
      </a>
    </m-command-group>
  </m-command-list>
  <p data-command-empty hidden>
    No matching commands.
  </p>
</m-command-palette>

Small, explicit responsibilities

command.js enhances authored markup with filtering, grouped results, disabled-item skipping, and active-descendant keyboard navigation. Enter activates the original button or link.

filter="manual" leaves matching and result rendering to the application—for indexed docs search or remote results. The component still owns keyboard selection.

A native <dialog> adds the palette presentation. The application owns opening shortcuts and actions. Shortcut labels and icons are optional authored content; labels do not register hotkeys.

Without the enhancement, links and buttons remain usable. The search input is revealed when filtering is ready.