Command

A filterable command palette with keyboard navigation, powered by the ShadixCommand hook.

<.command></.command>

Examples

Command palette

Search input, grouped items, shortcuts, and empty state.

<div class="max-w-md">
  <.command id="example-command" class="border shadow-md">
    <.command_input id="example-command" placeholder="Type a command or search..." />
    <.command_list>
      <.command_empty>No results found.</.command_empty>
      <.command_group heading="Suggestions">
        <.command_item value="calendar">Calendar</.command_item>
        <.command_item value="search-emoji">Search Emoji</.command_item>
        <.command_item value="calculator">Calculator</.command_item>
      </.command_group>
      <.command_separator />
      <.command_group heading="Settings">
        <.command_item value="profile">
          Profile
          <.command_shortcut>⌘P</.command_shortcut>
        </.command_item>
        <.command_item value="billing">
          Billing
          <.command_shortcut>⌘B</.command_shortcut>
        </.command_item>
        <.command_item value="settings">
          Settings
          <.command_shortcut>⌘S</.command_shortcut>
        </.command_item>
      </.command_group>
    </.command_list>
  </.command>
</div>

Show code

Props

Name	Type	Default	Values
class	:string
id	:string
rest	:global
inner_block (slot)	:slot