Command

A fast, composable, and accessible command menu for Blazor SSR applications. Users can open the menu and start typing to filter a list of commands or options.

Under the Hood

The RzCommand component family is powered by Alpine.js. It uses a performant architecture where items are defined as <template> tags and are only rendered into the DOM by Alpine when they match the search filter. This ensures excellent performance even with thousands of items.

Example

Here is a basic example of the command component with a few groups and items.

Source

<RzCommand class="rounded-lg border shadow-md md:min-w-[450px]">
    <CommandInput Placeholder="Type a command or search..." />
    <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup Heading="Suggestions">
            <CommandItem Value="Calendar">
                <Blazicon Svg="Lucide.Calendar" class="mr-2 size-4" />
                <span>Calendar</span>
            </CommandItem>
            <CommandItem Value="Search Emoji">
                <Blazicon Svg="Lucide.Smile" class="mr-2 size-4" />
                <span>Search Emoji</span>
            </CommandItem>
            <CommandItem Value="Calculator" Disabled="true">
                <Blazicon Svg="Lucide.Calculator" class="mr-2 size-4" />
                <span>Calculator</span>
            </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup Heading="Settings">
            <CommandItem Value="Profile">
                <Blazicon Svg="Lucide.User" class="mr-2 size-4" />
                <span>Profile</span>
                <CommandShortcut>⌘P</CommandShortcut>
            </CommandItem>
            <CommandItem Value="Billing">
                <Blazicon Svg="Lucide.CreditCard" class="mr-2 size-4" />
                <span>Billing</span>
                <CommandShortcut>⌘B</CommandShortcut>
            </CommandItem>
            <CommandItem Value="Settings">
                <Blazicon Svg="Lucide.Settings" class="mr-2 size-4" />
                <span>Settings</span>
                <CommandShortcut>⌘S</CommandShortcut>
            </CommandItem>
        </CommandGroup>
    </CommandList>
</RzCommand>

Dialog

To show the command menu in a dialog, use the RzCommandDialog component. You can control its visibility by binding to the Open parameter or by dispatching a window event matching its EventTriggerName.

Press ⌘ K

Source

<div x-on:keydown.window.cmd.k.prevent="$dispatch('show-command-dialog') x-on:keydown.window.ctrl.k.prevent="$dispatch('show-command-dialog')">
    <p class="text-muted-foreground text-sm">
        Press
        <RzKbdGroup>
            <RzKbd>⌘</RzKbd>
            <RzKbd>K</RzKbd>
        </RzKbdGroup>
    </p>

    <RzCommandDialog EventTriggerName="show-command-dialog">
        <CommandInput Placeholder="Type a command or search..." />
        <CommandList>
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup Heading="Suggestions">
                <CommandItem>
                    <Blazicon Svg="Lucide.Calendar" class="mr-2 size-4" />
                    <span>Calendar</span>
                </CommandItem>
                <!-- ... other items ... -->
            </CommandGroup>
        </CommandList>
    </RzCommandDialog>
</div>

Data Sourced Items

You can populate the command menu from a C# `IEnumerable` by passing it to the `Items` parameter. Use the `CommandItemTemplate` to define how each data item should be rendered on the client-side using Alpine.js.

Source

<RzCommand class="rounded-lg border shadow-md md:min-w-[450px]" Items="@_commandItems">
    <CommandInput Placeholder="Search people..." />
    <CommandList>
        <CommandEmpty>No people found.</CommandEmpty>
        
        <CommandItemTemplate>
            <Blazicon Svg="@Lucide.User" class="mr-2 size-4" />
            <span x-text="item.name"></span>
            <CommandShortcut x-text="item.shortcut"></CommandShortcut>
        </CommandItemTemplate>
    </CommandList>
</RzCommand>

Source

@code {
    private readonly List<CommandItemData> _commandItems = [
        // Engineering (10)
        new CommandItemData { Value = "E1001", Name = "Ethan Parker",       Group = "Engineering",     Shortcut = "" },
        new CommandItemData { Value = "E1002", Name = "Ava Mitchell",       Group = "Engineering",     Shortcut = "" },
        new CommandItemData { Value = "E1003", Name = "Noah Sullivan",      Group = "Engineering",     Shortcut = "" },
        new CommandItemData { Value = "E1004", Name = "Olivia Bennett",     Group = "Engineering",     Shortcut = "" },
        ... // Additional items omitted for brevity
    ];
}

Component Parameters

The following tables summarize the parameters for each component in the Command family.

RzCommand

Property	Type	Default	Description
`ChildContent`	`RenderFragment`	Required	The inner components of the command menu.
`Items`	`IEnumerable<object>`	Empty	A collection of items to render dynamically.
`ItemsUrl`	`string?`	`null`	A URL to fetch items from as a JSON array.
`FetchTrigger`	`FetchTrigger`	`Immediate`	When to fetch data if `ItemsUrl` is provided.
`ServerFiltering`	`bool`	`false`	If true, appends the search query to `ItemsUrl` for server-side filtering.
`AriaLabel`	`string?`	"Command Menu"	Accessible label for the command menu container.
`ShouldFilter`	`bool`	`true`	Whether to enable built-in client-side filtering and sorting.
`Loop`	`bool`	`false`	Whether keyboard navigation should wrap around the list.
`SelectedValue`	`string?`	`null`	The value of the currently selected item. Can be used for two-way binding.

RzCommandDialog

Property	Type	Default	Description
`Open`	`bool`	`false`	Controls the visibility of the dialog. Supports two-way binding with `@bind-Open`.
`EventTriggerName`	`string`	Generated	The name of the window event that will trigger the dialog to open.
`Title`	`string?`	"Command Palette"	The title for the dialog, used for accessibility.
`Description`	`string?`	"Search for a command..."	The description for the dialog, used for accessibility.
`ShowCloseButton`	`bool`	`true`	Whether to display the default 'X' close button.

CommandItem

Property	Type	Default	Description
`Value`	`string?`	Inferred from content	The unique value of the item, used for filtering and selection.
`Keywords`	`IEnumerable<string>`	Empty	A list of additional keywords to match against during search.
`Disabled`	`bool`	`false`	If true, the item cannot be selected.
`ForceMount`	`bool`	`false`	If true, the item will always be rendered, regardless of the search query.

The components CommandInput, CommandList, CommandEmpty, CommandGroup, CommandSeparator, and CommandShortcut primarily accept ChildContent and pass through additional HTML attributes. They have no unique parameters beyond standard HTML attributes.

Command

Under the Hood

Example

Dialog

Command Palette

Data Sourced Items

Component Parameters

RzCommand

RzCommandDialog

CommandItem