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.

<div class="vt-rounded-xl vt-border vt-shadow-2xl">
  <div class="vt-flex vt-items-center vt-border-b vt-px-3">
    <input type="text" placeholder="Type a command..." class="vt-command-input" />
  </div>
  <div class="vt-p-2">
    <div class="vt-text-xs vt-font-semibold">Suggestions</div>
    <div class="vt-command-item">Calendar</div>
    <div class="vt-command-item">Settings</div>
  </div>
</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-bg-surfaces-surface vt-shadow-2xl">
  <div class="vt-flex vt-items-center vt-border-b vt-px-3">
    <svg>...</svg>
    <div class="vt-flex vt-h-11 vt-px-3 vt-text-sm">something random...</div>
  </div>
  <div class="vt-py-6 vt-text-center vt-text-sm vt-text-mains-quaternary">
    No results found.
  </div>
</div>

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