shadcn-rails

Command

A command menu with search input, keyboard navigation, and item selection.

Requires JavaScript
No results found.
Calendar
Search
Settings
command/default 
<%= render(Shadcn::CommandComponent.new(class_name: "w-[320px] rounded-lg border shadow-md")) do |command| %>
  <% command.with_input(placeholder: "Type a command or search...") %>
  <% command.with_list do |list| %>
    <% list.with_empty { "No results found." } %>
    <% list.with_group(heading: "Suggestions") do |group| %>
      <% group.with_item(value: "calendar") { "Calendar" } %>
      <% group.with_item(value: "search") { "Search" } %>
      <% group.with_item(value: "settings") { "Settings" } %>
    <% end %>
  <% end %>
<% end %>

Installation

Add the component to your project:

rails generate shadcn:add command

Usage

<%= render(Shadcn::CommandComponent.new(class_name: "w-[320px] rounded-lg border shadow-md")) do |command| %>
  <% command.with_input(placeholder: "Type a command or search...") %>
  <% command.with_list do |list| %>
    <% list.with_empty { "No results found." } %>
    <% list.with_group(heading: "Suggestions") do |group| %>
      <% group.with_item(value: "calendar") { "Calendar" } %>
      <% group.with_item(value: "search") { "Search" } %>
      <% group.with_item(value: "settings") { "Settings" } %>
    <% end %>
  <% end %>
<% end %>

Examples

Groups with Separator

Organize commands into groups with separators.

No results found.
Calendar
Music
Profile
Billing
Settings 
<div class="rounded-lg border shadow-md w-full max-w-md">
  <%= render Shadcn::CommandComponent.new do |command| %>
    <% command.with_input(placeholder: "Search...") %>
    <% command.with_list do |list| %>
      <% list.with_empty { "No results found." } %>
      <% list.with_group(heading: "Applications") do |group| %>
        <% group.with_item(value: "calendar") do %>
          <svg class="mr-2 h-4 w-4" 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"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
          Calendar
        <% end %>
        <% group.with_item(value: "music") do %>
          <svg class="mr-2 h-4 w-4" 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"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
          Music
        <% end %>
      <% end %>
      <% list.with_separator %>
      <% list.with_group(heading: "Settings") do |group| %>
        <% group.with_item(value: "profile") do %>
          <svg class="mr-2 h-4 w-4" 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"><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>
          Profile
        <% end %>
        <% group.with_item(value: "billing") do %>
          <svg class="mr-2 h-4 w-4" 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"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
          Billing
        <% end %>
        <% group.with_item(value: "settings") do %>
          <svg class="mr-2 h-4 w-4" 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"><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>
          Settings
        <% end %>
      <% end %>
    <% end %>
  <% end %>
</div>

With Keyboard Shortcuts

Display keyboard shortcuts alongside commands.

New Project ⌘N
Save ⌘S
Settings ⌘,
<div class="rounded-lg border shadow-md w-full max-w-md">
  <%= render Shadcn::CommandComponent.new do |command| %>
    <% command.with_input(placeholder: "Type a command...") %>
    <% command.with_list do |list| %>
      <% list.with_group(heading: "Actions") do |group| %>
        <% group.with_item(value: "new-project") do |item| %>
          <% item.with_shortcut { "⌘N" } %>
          <svg class="mr-2 h-4 w-4" 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"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M9 15h6"/><path d="M12 18v-6"/></svg>
          New Project
        <% end %>
        <% group.with_item(value: "save") do |item| %>
          <% item.with_shortcut { "⌘S" } %>
          <svg class="mr-2 h-4 w-4" 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"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
          Save
        <% end %>
        <% group.with_item(value: "settings") do |item| %>
          <% item.with_shortcut { "⌘," } %>
          <svg class="mr-2 h-4 w-4" 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"><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>
          Settings
        <% end %>
      <% end %>
    <% end %>
  <% end %>
</div>

With Disabled Items

Disable specific items in the command list.

New File
Copy
Delete (Disabled)
<div class="rounded-lg border shadow-md w-full max-w-md">
  <%= render Shadcn::CommandComponent.new do |command| %>
    <% command.with_input(placeholder: "Type a command...") %>
    <% command.with_list do |list| %>
      <% list.with_group(heading: "Actions") do |group| %>
        <% group.with_item(value: "new") { "New File" } %>
        <% group.with_item(value: "copy") { "Copy" } %>
        <% group.with_item(value: "delete", disabled: true) { "Delete (Disabled)" } %>
      <% end %>
    <% end %>
  <% end %>
</div>

Command Dialog

Use Command in a dialog with keyboard shortcut (⌘K).

<%= render Shadcn::CommandDialogComponent.new(shortcut: "k") do |dialog| %>
  <% dialog.with_trigger do %>
    <%= render Shadcn::ButtonComponent.new(variant: :outline, class_name: "text-sm text-muted-foreground") do %>
      <span class="mr-2">Search...</span>
      <%= render Shadcn::KbdComponent.new(class_name: "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 ml-auto") do %>
        ⌘K
      <% end %>
    <% end %>
  <% end %>
  <% dialog.with_command do |command| %>
    <% command.with_input(placeholder: "Type a command or search...") %>
    <% command.with_list do |list| %>
      <% list.with_empty { "No results found." } %>
      <% list.with_group(heading: "Suggestions") do |group| %>
        <% group.with_item(value: "calendar") do %>
          <svg class="mr-2 h-4 w-4" 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"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
          Calendar
        <% end %>
        <% group.with_item(value: "search") do %>
          <svg class="mr-2 h-4 w-4" 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"><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>
          Search Emoji
        <% end %>
        <% group.with_item(value: "calculator") do %>
          <svg class="mr-2 h-4 w-4" 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"><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>
          Calculator
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

API Reference

CommandComponent

API Reference

Prop Type Default Description
class_name String nil Additional CSS classes to apply

CommandInputComponent

API Reference

Prop Type Default Description
placeholder String "Type a command or search..." Placeholder text for the input
autofocus Boolean false Whether to autofocus the input

CommandGroupComponent

API Reference

Prop Type Default Description
heading String nil Optional heading for the group

CommandItemComponent

API Reference

Prop Type Default Description
value String nil The searchable value (defaults to content text)
disabled Boolean false Whether the item is disabled
on_select String nil JavaScript to execute on select

CommandDialogComponent

API Reference

Prop Type Default Description
shortcut String nil Keyboard shortcut to open (e.g., "k" for ⌘K)

Slots

Slot Description
with_input Search input with magnifying glass icon
with_list Container for groups and items with scrolling
with_empty Shown when no results match the search
with_group(heading:) Group of related items with optional heading
with_item(value:, disabled:) Individual selectable command item
with_separator Visual divider between groups
with_shortcut Keyboard shortcut hint (inside item)

Keyboard Navigation

Key Action
↑ / ↓ Navigate through items
Enter Select the highlighted item
Escape Clear search input or close dialog
⌘K Open/close command dialog (if shortcut configured)

Accessibility

  • Uses role="option" for items
  • Uses role="group" for command groups
  • Full keyboard navigation support (Arrow keys, Enter, Escape)
  • Focus is managed within the command palette
  • Dialog traps focus and returns it on close
  • Screen readers announce when no results are found