Command

<button
  class="btn secondary kbd-inline"
  type="button"
  data-dialog-open="command-palette"
  aria-haspopup="dialog"
  aria-controls="command-palette"
>
  Search Layout UI
  <span class="kbd" data-keys="Mod K">
    <kbd>
      Ctrl
    </kbd>
    <kbd>
      K
    </kbd>
  </span>
</button>
<dialog
  class="dialog command"
  id="command-palette"
  data-command
  data-command-shortcut="k"
  aria-label="Search Layout UI"
>
  <div class="command-search">
    <div class="input-group">
      <span class="input-group-addon" aria-hidden="true">
        <span class="icon" data-icon="search" aria-hidden="true">
        </span>
      </span>
      <input
        class="input"
        type="search"
        data-command-input
        aria-label="Search commands"
        placeholder="Where would you like to go?"
        autocomplete="off"
        autofocus
      >
    </div>
    <button class="btn ghost btn-icon" type="button" data-dialog-close aria-label="Close">
      <span class="icon" data-icon="close" aria-hidden="true">
      </span>
    </button>
  </div>
  <div class="command-results">
    <div data-command-list aria-label="Destinations">
      <div data-command-group role="group" aria-labelledby="command-build">
        <div class="command-group-label" id="command-build">
          Build
        </div>
        <a class="command-item" data-command-item="Components" href="/components">
          <span class="icon" data-icon="grid" aria-hidden="true">
          </span>
          <span>
            Components
            <small>
              Controls for your next interface.
            </small>
          </span>
        </a>
        <a class="command-item" data-command-item="Icons" href="/icons">
          <span class="icon" data-icon="star" aria-hidden="true">
          </span>
          <span>
            Icons
            <small>
              Find the right symbol.
            </small>
          </span>
        </a>
        <a class="command-item" data-command-item="CSS" href="/css">
          <span class="icon" data-icon="code" aria-hidden="true">
          </span>
          <span>
            CSS
            <small>
              Shape your layout.
            </small>
          </span>
        </a>
      </div>
      <div data-command-group role="group" aria-labelledby="command-controls">
        <div class="command-group-label" id="command-controls">
          Components
        </div>
        <a class="command-item" data-command-item="button" href="/components/button">
          <span class="icon" data-icon="plus" aria-hidden="true">
          </span>
          <span>
            Button
            <small>
              Actions, toggles, and icon buttons.
            </small>
          </span>
        </a>
        <a class="command-item" data-command-item="input" href="/components/input">
          <span class="icon" data-icon="search" aria-hidden="true">
          </span>
          <span>
            Input
            <small>
              Text fields and attached controls.
            </small>
          </span>
        </a>
        <a class="command-item" data-command-item="select" href="/components/select">
          <span class="icon" data-icon="chevron-down" aria-hidden="true">
          </span>
          <span>
            Select
            <small>
              Choose from a list of options.
            </small>
          </span>
        </a>
        <a class="command-item" data-command-item="dialog" href="/components/dialog">
          <span class="icon" data-icon="grid" aria-hidden="true">
          </span>
          <span>
            Dialog
            <small>
              Focused tasks in an overlay.
            </small>
          </span>
        </a>
        <a class="command-item" data-command-item="number" href="/components/number">
          <span class="icon" data-icon="settings" aria-hidden="true">
          </span>
          <span>
            Number
            <small>
              Quantities, currency, and increments.
            </small>
          </span>
        </a>
        <a class="command-item" data-command-item="slider" href="/components/slider">
          <span class="icon" data-icon="settings" aria-hidden="true">
          </span>
          <span>
            Slider
            <small>
              Adjust a value or range.
            </small>
          </span>
        </a>
        <a class="command-item" data-command-item="table" href="/components/table">
          <span class="icon" data-icon="grid" aria-hidden="true">
          </span>
          <span>
            Table
            <small>
              Organize and compare records.
            </small>
          </span>
        </a>
        <a
          class="command-item"
          data-command-item="radial-progress"
          href="/components/radial-progress"
        >
          <span class="icon" data-icon="star" aria-hidden="true">
          </span>
          <span>
            Gauge
            <small>
              Track progress with one or more rings.
            </small>
          </span>
        </a>
      </div>
      <div data-command-group role="group" aria-labelledby="command-learn">
        <div class="command-group-label" id="command-learn">
          Learn
        </div>
        <a class="command-item" data-command-item="Themes" href="/docs/themes">
          <span class="icon" data-icon="settings" aria-hidden="true">
          </span>
          <span>
            Themes
            <small>
              Make it your own.
            </small>
          </span>
        </a>
        <a class="command-item" data-command-item="Install" href="/docs/install">
          <span class="icon" data-icon="download" aria-hidden="true">
          </span>
          <span>
            Install
            <small>
              Start a new project.
            </small>
          </span>
        </a>
        <a class="command-item" data-command-item="building" href="/docs/building">
          <span class="icon" data-icon="code" aria-hidden="true">
          </span>
          <span>
            Building Interfaces
            <small>
              Compose a page with shared components.
            </small>
          </span>
        </a>
        <a class="command-item" data-command-item="ai" href="/docs/ai">
          <span class="icon" data-icon="code" aria-hidden="true">
          </span>
          <span>
            AI Guide
            <small>
              Design conventions for your assistant.
            </small>
          </span>
        </a>
        <a
          class="command-item"
          data-command-item="integrations"
          href="/docs/integrations"
        >
          <span class="icon" data-icon="code" aria-hidden="true">
          </span>
          <span>
            Integrations
            <small>
              Use Layout UI with your framework.
            </small>
          </span>
        </a>
      </div>
    </div>
    <p class="command-empty" data-command-empty role="status" hidden>
      No results found.
    </p>
  </div>
  <footer class="command-hint">
    <span class="kbd-inline">
      <span class="kbd" data-keys="ArrowUp">
        <kbd>
          ↑
        </kbd>
      </span>
      <span class="kbd" data-keys="ArrowDown">
        <kbd>
          ↓
        </kbd>
      </span>
      Navigate
    </span>
    <span class="kbd-inline">
      <span class="kbd" data-keys="Enter">
        <kbd>
          Enter
        </kbd>
      </span>
      Open
    </span>
    <span class="kbd-inline">
      <span class="kbd" data-keys="Escape">
        <kbd>
          Escape
        </kbd>
      </span>
      Close
    </span>
  </footer>
</dialog>

<div class="command panel w-full max-w-sm" data-command>
  <div class="command-search">
    <div class="input-group">
      <span class="input-group-addon" aria-hidden="true">
        <span class="icon" data-icon="search" aria-hidden="true">
        </span>
      </span>
      <input
        class="input"
        data-command-input
        type="search"
        aria-label="Find a component"
        placeholder="Find a component"
        autocomplete="off"
      >
    </div>
  </div>
  <div class="command-results">
    <div data-command-list aria-label="Components">
      <div data-command-group role="group" aria-labelledby="inline-components">
        <div class="command-group-label" id="inline-components">
          Components
        </div>
        <a class="command-item" data-command-item="Button" href="/components/button">
          <span class="icon" data-icon="plus" aria-hidden="true">
          </span>
          <span>
            Button
          </span>
        </a>
        <a class="command-item" data-command-item="Dialog" href="/components/dialog">
          <span class="icon" data-icon="grid" aria-hidden="true">
          </span>
          <span>
            Dialog
          </span>
        </a>
        <a class="command-item" data-command-item="Number" href="/components/number">
          <span class="icon" data-icon="settings" aria-hidden="true">
          </span>
          <span>
            Number
          </span>
        </a>
      </div>
      <button
        class="command-item"
        type="button"
        data-command-item="archived"
        aria-disabled="true"
      >
        Archived component
      </button>
    </div>
    <p class="command-empty" data-command-empty role="status" hidden>
      No results found.
    </p>
  </div>
</div>

<div class="command panel w-full max-w-sm" data-command dir="rtl" lang="he">
  <div class="command-search">
    <div class="input-group">
      <span class="input-group-addon" aria-hidden="true">
        <span class="icon" data-icon="search" aria-hidden="true">
        </span>
      </span>
      <input
        class="input"
        type="search"
        data-command-input
        aria-label="חיפוש"
        placeholder="חיפוש"
        autocomplete="off"
      >
    </div>
  </div>
  <div class="command-results">
    <div data-command-list aria-label="עמודים">
      <a class="command-item" data-command-item="components" href="/components">
        רכיבים
      </a>
      <a class="command-item" data-command-item="icons" href="/icons">
        סמלים
      </a>
      <a class="command-item" data-command-item="themes" href="/docs/themes">
        ערכות עיצוב
      </a>
    </div>
    <p class="command-empty" data-command-empty role="status" hidden>
      לא נמצאו תוצאות.
    </p>
  </div>
</div>