Custom Command Components
Command
<![CDATA[
<div style="width: 400px;">
<div class="combobox combobox--command">
<div class="combobox__dropdown">
<div class="combobox__search">
<span class="combobox__search-icon">
<i data-lucide="search"></i>
</span>
<input type="text" class="combobox__search-input"
placeholder="Type to search...">
</div>
<div class="combobox__section">
<div class="combobox__section-title">Suggestions</div>
<div class="combobox__item">
<div class="combobox__item-icon">
<i data-lucide="calendar"></i>
</div>
<span class="combobox__item-text">Calendar</span>
</div>
<div class="combobox__item">
<div class="combobox__item-icon">
<i data-lucide="smile"></i>
</div>
<span class="combobox__item-text">Search Emoji</span>
</div>
<div class="combobox__item">
<div class="combobox__item-icon">
<i data-lucide="calculator"></i>
</div>
<span class="combobox__item-text">Calculator</span>
</div>
</div>
<div class="combobox__section">
<div class="combobox__section-title">Settings</div>
<div class="combobox__item">
<div class="combobox__item-icon">
<i data-lucide="user"></i>
</div>
<span class="combobox__item-text">Profile</span>
<span class="combobox__item-right">3</span>
</div>
<div class="combobox__item">
<div class="combobox__item-icon">
<i data-lucide="credit-card"></i>
</div>
<span class="combobox__item-text">Billing</span>
<span class="combobox__item-right">12</span>
</div>
<div class="combobox__item">
<div class="combobox__item-icon">
<i data-lucide="settings"></i>
</div>
<span class="combobox__item-text">Settings</span>
<span class="combobox__item-right">32</span>
</div>
</div>
</div>
</div>
</div>
]]>