Search Bar

The command-palette-style search — fast access to everything in Monarch.

Default Search

Search Bar

⌘K

HTML

<div class="monarch-search">
  <svg class="monarch-search__icon">...</svg>
  <input class="monarch-search__input" placeholder="Search or type a command..." />
  <kbd class="monarch-search__kbd">⌘K</kbd>
</div>

Active Search with Results

Search with Results

Baltix ESC

Accounts

Baltix Construction

Fabricator · Minneapolis, MN

↵

Baltix Home Designs

Designer · Chicago, IL

Deals

Renovation - Baltix

$154,527 · Prospecting

HTML

<div class="monarch-command-palette">
  <div class="monarch-command-palette__input">...</div>
  <div class="monarch-command-palette__results">
    <div class="monarch-command-palette__group-title">Accounts</div>
    <button class="monarch-command-palette__item monarch-command-palette__item--selected">...</button>
  </div>
</div>

Usage Guidelines

• The search bar doubles as a command palette trigger — keyboard-first design

• Results are grouped by entity type (Accounts, Deals, Contacts, Actions)

• Matching text is highlighted with indigo background

• First result is auto-selected — Enter opens it immediately

• Keyboard shortcuts in the footer reinforce the power-user experience