Command

Examples

Dialog

Press ⌘J to open the command palette.

<p class="text-sm text-muted-foreground">
  Press
  <kbd class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">⌘</kbd>
  <kbd class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">J</kbd>
  to open the command palette.
</p>
<%= render "ui/command_dialog", shortcut: "meta+j" do %>
  <%= render "ui/command/input", placeholder: "Type a command or search..." %>
  <%= render "ui/command/list" do %>
    <%= render "ui/command/empty", content: "No results found." %>
    <%= render "ui/command/group", heading: "Suggestions" do %>
      <%= render "ui/command/item", value: "calendar" do %>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
        <span>Calendar</span>
      <% end %>
      <%= render "ui/command/item", value: "search emoji" do %>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/></svg>
        <span>Search Emoji</span>
      <% end %>
      <%= render "ui/command/item", value: "calculator" do %>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4"><rect width="16" height="20" x="4" y="2" rx="2"/><line x1="8" x2="16" y1="6" y2="6"/><line x1="16" x2="16" y1="14" y2="18"/><path d="M16 10h.01"/><path d="M12 10h.01"/><path d="M8 10h.01"/><path d="M12 14h.01"/><path d="M8 14h.01"/><path d="M12 18h.01"/><path d="M8 18h.01"/></svg>
        <span>Calculator</span>
      <% end %>
    <% end %>
    <%= render "ui/command/separator" %>
    <%= render "ui/command/group", heading: "Settings" do %>
      <%= render "ui/command/item", value: "profile" do %>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        <span>Profile</span>
        <%= render "ui/command/shortcut", content: "⌘P" %>
      <% end %>
      <%= render "ui/command/item", value: "billing" do %>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
        <span>Billing</span>
        <%= render "ui/command/shortcut", content: "⌘B" %>
      <% end %>
      <%= render "ui/command/item", value: "settings" do %>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
        <span>Settings</span>
        <%= render "ui/command/shortcut", content: "⌘S" %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

Default

Fast, composable command palette for searching and selecting items.

Suggestions
Calendar
Search Emoji
Calculator
Settings
Profile ⌘P
Settings ⌘S 
<%= render "ui/command", classes: "rounded-lg border shadow-md md:min-w-[450px]" do %>
  <%= render "ui/command/input", placeholder: "Type a command or search..." %>
  <%= render "ui/command/list" do %>
    <%= render "ui/command/empty", content: "No results found." %>
    <%= render "ui/command/group", heading: "Suggestions" do %>
      <%= render "ui/command/item", value: "calendar" do %>
        <span>Calendar</span>
      <% end %>
      <%= render "ui/command/item", value: "search emoji" do %>
        <span>Search Emoji</span>
      <% end %>
      <%= render "ui/command/item", value: "calculator" do %>
        <span>Calculator</span>
      <% end %>
    <% end %>
    <%= render "ui/command/separator" %>
    <%= render "ui/command/group", heading: "Settings" do %>
      <%= render "ui/command/item", value: "profile" do %>
        <span>Profile</span>
        <%= render "ui/command/shortcut", content: "⌘P" %>
      <% end %>
      <%= render "ui/command/item", value: "settings" do %>
        <span>Settings</span>
        <%= render "ui/command/shortcut", content: "⌘S" %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

Features

  • Custom styling with Tailwind classes
  • Keyboard navigation with arrow keys

API Reference

Command

Parameters

NameTypeDefaultDescription
loopBooleantrueWhether keyboard navigation loops from last to first item
autofocusBooleanfalseWhether to focus the input when the command opens (set to true in CommandDialog)

Empty

Group

Parameters

NameTypeDefaultDescription
headingStringnilThe heading

Input

Parameters

NameTypeDefaultDescription
placeholderStringType a command or search...Placeholder text when no value is selected

Item

Parameters

NameTypeDefaultDescription
valueStringnilThe current value
disabledBooleanfalseWhether the element is disabled

List

Separator

Shortcut

Accessibility

Adheres to theListbox WAI-ARIA design pattern

Implements the WAI-ARIA Listbox pattern with proper roles, states, and keyboard navigation.

Keyboard Shortcuts

KeyDescription
EnterActivates the focused element
ArrowDownMoves focus to next item
ArrowUpMoves focus to previous item
HomeMoves focus to first item
EndMoves focus to last item

JavaScript

Stimulus Controller

ui--command

Values

NameTypeDescription
loopBooleanWhether keyboard navigation loops from last to first item
autofocusBooleanWhether to focus the input when the command opens

Actions

filterselectNextselectPreviousselectFirstselectLastselectCurrentselecttriggerSelect

Events

EventDescriptionDetail
command:selectFired when command select-