Command — uicraft

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="uc-rounded-xl uc-border uc-shadow-2xl">
  <div class="uc-flex uc-items-center uc-border-b uc-px-3">
    <input type="text" placeholder="Type a command..." class="uc-command-input" />
  </div>
  <div class="uc-p-2">
    <div class="uc-text-xs uc-font-semibold">Suggestions</div>
    <div class="uc-command-item">Calendar</div>
    <div class="uc-command-item">Settings</div>
  </div>
</div>

With Keyboard Shortcuts

Command palette items with right-aligned keyboard shortcut hints.

html

Suggestions

Calendar ⌘C

Search ⌘S

Settings ⌘,

No results found.

<div class="uc-rounded-xl uc-border uc-bg-neutrals-surface uc-shadow-2xl">
  <div class="uc-flex uc-items-center uc-border-b uc-px-3">
    <svg>...</svg>
    <input type="text" placeholder="Type a command..." class="uc-command-input" />
  </div>
  <div class="uc-p-2">
    <div class="uc-text-xs uc-font-semibold">Suggestions</div>
    <div class="uc-command-item uc-selected">
      <svg>...</svg>
      <span>Calendar</span>
      <span class="uc-text-xs uc-ml-auto">⌘C</span>
    </div>
    <div class="uc-command-item">
      <svg>...</svg>
      <span>Search</span>
      <span class="uc-text-xs uc-ml-auto">⌘S</span>
    </div>
    ...
  </div>
</div>

Empty State

What users see when their search query returns no results.

html

something random...

No results found.

<div class="uc-rounded-xl uc-border uc-bg-neutrals-surface uc-shadow-2xl">
  <div class="uc-flex uc-items-center uc-border-b uc-px-3">
    <svg>...</svg>
    <div class="uc-flex uc-h-11 uc-px-3 uc-text-sm">something random...</div>
  </div>
  <div class="uc-py-6 uc-text-center uc-text-sm uc-text-fg-disabled">
    No results found.
  </div>
</div>

API Reference

All CSS classes available for the Command component.

Class	Type	Description
`uc-command-wrapper`	Base	Outer wrapper for the command palette
`uc-command-input`	Base	Search input field inside the palette
`uc-command-list`	Base	Scrollable list container for groups and items
`uc-command-group`	Base	Group wrapper for related command items
`uc-command-item`	Base	Individual selectable command item
`uc-command-separator`	Base	Separator line between groups
`uc-command-empty`	Base	Empty state shown when no results match
`uc-selected`	State	Highlights the currently active item
`uc-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