Vitreo
Components

Command palette

Search pages and run actions from the keyboard

Open it

Press ⌘K, or Ctrl K, anywhere in Vitreo.

⌘ K
Code
<button type="button" class="btn btn-primary" data-cmdk-open><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Open the palette</button>
<kbd>⌘</kbd>
<kbd>K</kbd>

What it finds

  • Every page in the menu
  • Actions such as dark mode
  • Up, down and Enter to choose
Code
<ul class="list list-divided list-flush">
  <li>
    <div class="list-row">
      <div class="media">
        <span class="icon-tile accent"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
        <div class="media-body"><span class="media-title">Every page in the menu</span></div>
      </div>
    </div>
  </li>
  <li>
    <div class="list-row">
      <div class="media">
        <span class="icon-tile accent"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
        <div class="media-body"><span class="media-title">Actions such as dark mode</span></div>
      </div>
    </div>
  </li>
  <li>
    <div class="list-row">
      <div class="media">
        <span class="icon-tile accent"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
        <div class="media-body"><span class="media-title">Up, down and Enter to choose</span></div>
      </div>
    </div>
  </li>
</ul>