Command

A filterable command palette, with arrow-key navigation and Enter.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add command --yes

The command registry item installs these files:

app/components/ui_component.rb
app/components/ui/command_component.rb
app/components/ui/command/input_component.rb
app/components/ui/command/list_component.rb
app/components/ui/command/empty_component.rb
app/components/ui/command/group_component.rb
app/components/ui/command/item_component.rb
app/components/ui/command/separator_component.rb
app/components/ui/command/shortcut_component.rb
app/helpers/ui/command_helper.rb
app/javascript/controllers/ui_command_controller.js
vendor/shadwire/shadwire.css

This component uses Stimulus, so the application needs importmap-rails and stimulus-rails with automatic controller loading.

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

<%= ui_command do %>
  <%= ui_command_input(placeholder: "Search...") %>
  <%= ui_command_list do %>
    <%= ui_command_empty { "No results found." } %>
    <%= ui_command_group(heading: "Suggestions") do %>
      <%= ui_command_item(value: "profile") { "Profile" } %>
    <% end %>
  <% end %>

<%= ui_command do %>
  <%= ui_command_input(placeholder: "Search...") %>
  <%= ui_command_list do %>
    <%= ui_command_empty { "No results found." } %>
    <%= ui_command_group(heading: "Suggestions") do %>
      <%= ui_command_item(value: "profile") { "Profile" } %>
    <% end %>
  <% end %>
<% end %>

Examples

Default

A palette with groups, icons and shortcuts.

<%= ui_command(class: "w-80 shadow-md") do %>
  <%= ui_command_input(placeholder: "Type a command or search...") %>
  <%= ui_command_list do %>
    <%= ui_command_empty { "No results found." } %>
    <%= ui_command_group(heading: "Suggestions") do %>
      <%= ui_command_item(value: "calendar") do %>
        <%= ui_icon("calendar") %>
        Calendar

<%= ui_command(class: "w-80 shadow-md") do %>
  <%= ui_command_input(placeholder: "Type a command or search...") %>
  <%= ui_command_list do %>
    <%= ui_command_empty { "No results found." } %>
    <%= ui_command_group(heading: "Suggestions") do %>
      <%= ui_command_item(value: "calendar") do %>
        <%= ui_icon("calendar") %>
        Calendar
      <% end %>
      <%= ui_command_item(value: "emoji") do %>
        <%= ui_icon("smile") %>
        Search emoji
      <% end %>
    <% end %>
    <%= ui_command_separator %>
    <%= ui_command_group(heading: "Settings") do %>
      <%= ui_command_item(value: "profile") do %>
        <%= ui_icon("user") %>
        Profile
        <%= ui_command_shortcut { "⌘P" } %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`Command::Input`	`placeholder`	`nil`	The search field's placeholder.
`Command::Group`	`heading`	`nil`	A heading shown above the group's items.
`Command::Item`	`value`	`nil`	What the search matches and the `select` event reports; the item's text when absent.
`Command::Item`	`disabled`	`false`	Disables it: not clickable, and skipped by the keyboard.