Renders a message when no results are found in a command dialog.

This component provides a centered message to display when a search returns no results.

Examples

<.command_empty>No results found.</.command_empty>
<.command_empty class="py-8">No items match your search.</.command_empty>

Attributes

• class (:string) - Additional CSS classes for the empty state. Defaults to nil.
• Global attributes are accepted. Additional HTML attributes.

Slots

• inner_block (required) - The content to display when no results are found.

Renders a group of command items with an optional heading.

This component provides a way to group related command items together with an optional heading.

Examples

<.command_group heading="Settings">
  <.command_item>Profile</command_item>
  <.command_item>Billing</command_item>
</.command_group>

<.command_group>
  <.command_item>Profile</command_item>
</.command_group>

Attributes

• heading (:string) - Optional heading text for the group. Defaults to nil.
• class (:string) - Additional CSS classes for the group. Defaults to nil.

Slots

• inner_block (required) - The content of the group.

Renders a styled input field for command dialogs with an icon.

This component provides a standardized input field used in command dialogs, featuring a search icon and consistent styling.

Examples

<.command_input placeholder="Search..." />
<.command_input placeholder="Type to search..." icon="tabler-settings" />

Attributes

• id (:string) - The unique identifier for the input. Defaults to nil.
• icon (:string) - Icon to display on the left side of the input. Defaults to "tabler-search".
• class (:string) - Additional CSS classes for the input wrapper. Defaults to nil.
• Global attributes are accepted. Additional HTML attributes for the input element.

Renders a command item with optional icon and shortcut.

This component provides a standardized command item that can display an icon or image on the left, content in the middle, and an optional shortcut indicator on the right.

Examples

<.command_item>
  <.icon name="tabler-settings" />
  <span>Settings</span>
  <.command_shortcut>⌘S</.command_shortcut>
</.command_item>

<.command_item disabled>
  <.icon name="tabler-lock" />
  <span>Restricted Option</span>
</.command_item>

Attributes

• class (:string) - Additional CSS classes for the item. Defaults to nil.
• selected (:boolean) - Whether the item is currently selected. Defaults to false.
• Global attributes are accepted. Additional HTML attributes. Supports all globals plus: ["href", "method", "navigate", "patch"].

Slots

• inner_block (required) - The content of the command item.

Renders a styled list container for command dialog items.

This component provides a standardized container for command dialog items with proper scrolling behavior and styling.

Examples

<.command_list>
  <li>
    <button>Menu item 1</button>
  </li>
</.command_list>

<.command_list class="max-h-52">
  <li>Settings item</li>
</.command_list>

Attributes

• id (:string) - The unique identifier for the list. Defaults to "command_list".
• class (:string) - Additional CSS classes for the list. Defaults to nil.

Slots

• inner_block (required) - The content of the list.

Renders a separator between command groups or items.

This component provides a visual separator that can be used between command groups or items.

Examples

<.command_group heading="Group 1">
  <.command_item>Item 1</command_item>
</.command_group>

<.command_separator />

<.command_group heading="Group 2">
  <.command_item>Item 2</command_item>
</.command_group>

Attributes

• class (:string) - Additional CSS classes for the separator. Defaults to nil.

Renders a keyboard shortcut label for command items.

This component provides a styled span for displaying keyboard shortcuts in command items.

Examples

<.command_shortcut>⌘K</.command_shortcut>
<.command_shortcut class="opacity-75">⌘P</.command_shortcut>

Attributes

• class (:string) - Additional CSS classes for the shortcut. Defaults to nil.
• Global attributes are accepted. Additional HTML attributes.

Slots

• inner_block (required) - The content of the shortcut.

Renders a button that looks like a search input field.

It can be used to trigger a command dialog when clicked. It also implements the Cmd + K or Ctrl + K keyboard shortcuts to open the dialog.

Examples

<.command_trigger label="Search..." dialog_id="search-dialog" />
<.command_trigger label="Find commands..." dialog_id="commands-dialog" shortcut="p" />

Attributes

• id (:string) - The unique identifier for the button. Defaults to "command-trigger".
• variant (:atom) - Variant of the command trigger button. Defaults to :input. Must be one of :icon, or :input.
• label (:string) - Text to display in the button. Defaults to "Search...".
• dialog_id (:string) - ID of the dialog to open. Defaults to "command-dialog".
• class (:string) - Additional CSS classes for the button. Defaults to nil.
• shortcut (:string) - Keyboard shortcut key to open the dialog. Defaults to "k".
• Global attributes are accepted. Additional HTML attributes for the button.