shadcn-rails

Command

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

Requires JavaScript
No results found.
Calendar
Search Emoji
Calculator

Installation

Add the component to your project:

rails generate shadcn:component command

Usage

<%= render Shadcn::CommandComponent.new 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 Emoji" } %>
      <% group.with_item(value: "calculator") { "Calculator" } %>
    <% end %>
  <% end %>
<% end %>

Examples

Groups with Separator

Organize commands into groups with separators.

No results found.
Calendar
Music
Profile
Billing
Settings 
<%= 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") { "Calendar" } %>
      <% group.with_item(value: "music") { "Music" } %>
    <% end %>
    <% list.with_separator %>
    <% list.with_group(heading: "Settings") do |group| %>
      <% group.with_item(value: "profile") { "Profile" } %>
      <% group.with_item(value: "billing") { "Billing" } %>
      <% group.with_item(value: "settings") { "Settings" } %>
    <% end %>
  <% end %>
<% end %>

With Keyboard Shortcuts

Display keyboard shortcuts alongside commands.

New Project ⌘N
Save ⌘S
Settings ⌘,
<%= 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" } %>
        New Project
      <% end %>
      <% group.with_item(value: "save") do |item| %>
        <% item.with_shortcut { "⌘S" } %>
        Save
      <% end %>
      <% group.with_item(value: "settings") do |item| %>
        <% item.with_shortcut { "⌘," } %>
        Settings
      <% end %>
    <% end %>
  <% end %>
<% end %>

With Disabled Items

Disable specific items in the command list.

New File
Copy
Delete (Disabled)
<%= 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 %>

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") { "Calendar" } %>
        <% group.with_item(value: "search") { "Search Emoji" } %>
        <% group.with_item(value: "calculator") { "Calculator" } %>
      <% 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