v1.1.1

Command

A command palette for searching and executing actions quickly.

Interactive Requires: veritheme.js JS init: automatic

Default

A command palette dialog with grouped items and search input. Try typing to filter.

html
Suggestions
Calendar
Search Emoji
Calculator
Settings
Profile
Billing
Settings
No results found.

Use arrows and Enter to run a command

<div class="vt-command-wrapper vt-rounded-xl vt-border vt-border-border-default vt-bg-surface-card vt-shadow-2xl vt-max-w-md vt-w-full vt-overflow-hidden">
  <!-- Search input -->
  <div class="vt-flex vt-w-full vt-items-center vt-border-b vt-border-border-default vt-px-3">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-search vt-w-4 vt-h-4 vt-text-foreground-muted vt-shrink-0">
      <path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle>
    </svg>
    <input type="text" placeholder="Type a command or search..." class="vt-command-input vt-flex vt-h-12 vt-flex-1 vt-bg-transparent vt-px-3 vt-text-sm vt-outline-none vt-placeholder:text-foreground-muted" oninput="filterCommand(this)" onkeydown="navigateCommand(event, this)" aria-label="Type a command or search..." aria-describedby="command-1-1">
  </div>
  <!-- List -->
  <div class="vt-command-list vt-p-2 vt-max-h-72 vt-overflow-y-auto">
    <!-- Group: Suggestions -->
    <div class="vt-command-group" data-command-group="">
      <div class="vt-text-xs vt-font-semibold vt-text-foreground-muted vt-px-2 vt-py-1.5" data-command-label="">Suggestions</div>
      <div class="vt-command-item vt-selected" data-value="calendar">

        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-calendar vt-w-4 vt-h-4 vt-text-foreground-muted vt-shrink-0">
          <path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path>
        </svg>
        Calendar
      </div>
      <div class="vt-command-item" data-value="emoji">

        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-smile vt-w-4 vt-h-4 vt-text-foreground-muted vt-shrink-0">
          <circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" x2="9.01" y1="9" y2="9"></line><line x1="15" x2="15.01" y1="9" y2="9"></line>
        </svg>
        Search Emoji
      </div>
      <div class="vt-command-item" data-value="calculator">

        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-calculator vt-w-4 vt-h-4 vt-text-foreground-muted vt-shrink-0">
          <rect width="16" height="20" x="4" y="2" rx="2"></rect><line x1="8" x2="16" y1="6" y2="6"></line><line x1="16" x2="16" y1="14" y2="18"></line><path d="M16 10h.01"></path><path d="M12 10h.01"></path><path d="M8 10h.01"></path><path d="M12 14h.01"></path><path d="M8 14h.01"></path><path d="M12 18h.01"></path><path d="M8 18h.01"></path>
        </svg>
        Calculator
      </div>
    </div>
    <!-- Separator -->
    <div class="vt-separator vt-separator-h vt-my-1 vt--mx-2 vt-w-auto vt-command-separator"></div>
    <!-- Group: Settings -->
    <div class="vt-command-group" data-command-group="">
      <div class="vt-text-xs vt-font-semibold vt-text-foreground-muted vt-px-2 vt-py-1.5" data-command-label="">Settings</div>
      <div class="vt-command-item" data-value="profile">

        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-user vt-w-4 vt-h-4 vt-text-foreground-muted vt-shrink-0">
          <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle>
        </svg>
        Profile
      </div>
      <div class="vt-command-item" data-value="billing">

        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-credit-card vt-w-4 vt-h-4 vt-text-foreground-muted vt-shrink-0">
          <rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line>
        </svg>
        Billing
      </div>
      <div class="vt-command-item" data-value="settings">

        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-settings vt-w-4 vt-h-4 vt-text-foreground-muted vt-shrink-0">
          <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle>
        </svg>
        Settings
      </div>
    </div>
  </div>
  <!-- Empty state -->
  <div class="vt-command-empty vt-hidden vt-py-6 vt-text-center vt-text-sm vt-text-foreground-muted">
    No results found.
  </div>
  <!-- Selection feedback (Enter on the highlighted item) -->
  <p class="vt-px-3 vt-py-2 vt-border-t vt-border-border-default vt-text-xs vt-text-foreground-muted" data-command-status="" aria-live="polite" id="command-1-1">Use arrows and Enter to run a command</p>
</div>

Empty State

What users see when their search query returns no results.

html
something random...
No results found. 
<div class="vt-rounded-xl vt-border vt-border-border-default vt-bg-surface-card vt-shadow-2xl vt-max-w-md vt-w-full vt-overflow-hidden">
  <div class="vt-flex vt-w-full vt-items-center vt-border-b vt-border-border-default vt-px-3">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-search vt-w-4 vt-h-4 vt-text-foreground-muted vt-shrink-0">
      <path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle>
    </svg>
    <div class="vt-flex vt-h-12 vt-flex-1 vt-items-center vt-px-3 vt-text-sm vt-text-foreground-primary">something random...</div>
  </div>
  <div class="vt-py-6 vt-text-center vt-text-sm vt-text-foreground-muted">
    No results found.
  </div>
</div>

Guidelines

Command palette (⌘K) for global search/actions. NOT a form control → select/combobox.

Calendar
Settings
Do
Reserve the palette for global search and cross-app actions.
United States
Canada
Don't
Don't use the palette to pick a form value — use a combobox or select.

Anatomy

HTML structure of the Command component.

div.vt-command-wrapper                     ← Root wrapper
├── div (search row)                       ← Input area
│   ├── svg                                ← Search icon
│   └── input.vt-command-input            ← Filterable text input
└── div.vt-command-list                    ← Scrollable results
    ├── p.vt-command-empty                 ← No results state
    └── div.vt-command-group               ← Named group
        ├── span (group label)             ← Group header
        └── div.vt-command-item            ← Selectable item

API Reference

All CSS classes available for the Command component.

Class Type Description
vt-command-wrapper Base Outer wrapper for the command palette
vt-command-input Base Search input field inside the palette
vt-command-list Base Scrollable list container for groups and items
vt-command-group Base Group wrapper for related command items
vt-command-item Base Individual selectable command item
vt-command-separator Base Separator line between groups
vt-command-empty Base Empty state shown when no results match
vt-selected State Highlights the currently active item
vt-hidden State Hides filtered-out items or empty state

Accessibility

Keyboard and screen reader support.

Feature Details
Role Use role="combobox" on input with role="listbox" on results list
Keyboard Arrow keys navigate results, Enter selects, Escape closes
Search Input should have aria-autocomplete="list" and aria-controls linking to results
Active Active result has aria-selected="true", announced to screen readers
Built with:
Input MenuItem Icons Separator