Feature Request: Command Palette component for quick action execution #1722

Closed
opened 2026-01-29 17:57:44 +00:00 by claunia · 3 comments
Owner

Originally created by @franklupo on GitHub (Apr 17, 2025).

Is your feature request related to a problem? Please describe.
Currently, Radzen does not provide a built-in Command Palette component — a centralized input dialog that lets users quickly search and execute commands, similar to the Command Palette in Visual Studio Code, Spotlight on macOS, or tools like Raycast. This limits UX options in admin panels and productivity tools.

Describe the solution you'd like
I’d love to see a RadzenCommandPalette component, inspired by implementations like:
https://blazor.art/Tools/Simple-UI/CommandExample

Features could include:

  • Typing to filter commands.
  • Grouped command suggestions (e.g. Suggestions / Settings).
  • Optional icons and keyboard shortcuts per command.
  • Full keyboard navigation (arrow keys, Enter, etc).
  • Custom command execution handlers.
  • Optional CanExecute support to disable/enable specific commands.

Image

Describe alternatives you've considered
It’s possible to build a custom command palette using Radzen's Dialog + DataList or AutoComplete components, but it's not ideal. A dedicated component would simplify implementation and ensure UX consistency across apps.

Additional context
This kind of component is increasingly popular in modern web apps and developer tools, especially for productivity. It fits well with enterprise dashboards, CMS, internal tools, and admin interfaces — all common use cases for Radzen Blazor apps.

Thank you for considering this feature!

Originally created by @franklupo on GitHub (Apr 17, 2025). **Is your feature request related to a problem? Please describe.** Currently, Radzen does not provide a built-in `Command Palette` component — a centralized input dialog that lets users quickly search and execute commands, similar to the Command Palette in Visual Studio Code, Spotlight on macOS, or tools like Raycast. This limits UX options in admin panels and productivity tools. **Describe the solution you'd like** I’d love to see a `RadzenCommandPalette` component, inspired by implementations like: https://blazor.art/Tools/Simple-UI/CommandExample Features could include: - Typing to filter commands. - Grouped command suggestions (e.g. Suggestions / Settings). - Optional icons and keyboard shortcuts per command. - Full keyboard navigation (arrow keys, Enter, etc). - Custom command execution handlers. - Optional `CanExecute` support to disable/enable specific commands. ![Image](https://github.com/user-attachments/assets/72407dc6-e176-4351-82df-15065efc9867) **Describe alternatives you've considered** It’s possible to build a custom command palette using Radzen's Dialog + DataList or AutoComplete components, but it's not ideal. A dedicated component would simplify implementation and ensure UX consistency across apps. **Additional context** This kind of component is increasingly popular in modern web apps and developer tools, especially for productivity. It fits well with enterprise dashboards, CMS, internal tools, and admin interfaces — all common use cases for Radzen Blazor apps. Thank you for considering this feature!
Author
Owner

@akorchev commented on GitHub (Apr 19, 2025):

I think this should be implemented as a custom solution to be honest - you can use RadzenDropDown or RadzenAutoComplete with a template. I don't see us implementing such a component in the near future.

@akorchev commented on GitHub (Apr 19, 2025): I think this should be implemented as a custom solution to be honest - you can use RadzenDropDown or RadzenAutoComplete with a template. I don't see us implementing such a component in the near future.
Author
Owner

@franklupo commented on GitHub (Apr 22, 2025):

Could you give an example?

best regards

@franklupo commented on GitHub (Apr 22, 2025): Could you give an example? best regards
Author
Owner

@akorchev commented on GitHub (Apr 23, 2025):

Here is a short demo:

<div class="rz-p-12 rz-text-align-center">
    <RadzenAutoComplete Placeholder="Select a command..." @bind-Value=@commandName FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" Data=@commands TextProperty="Name" >
        <Template>
            <RadzenStack Orientation="Orientation.Horizontal">
                <RadzenIcon Icon="@context.Icon" />
                <RadzenText Text="@context.Name" />
            </RadzenStack>
        </Template>
    </RadzenAutoComplete>

</div>

@code {
    class Command
    {
        public string Name { get; set; }
        public string Icon { get; set; }
    }

    string commandName;

    IEnumerable<Command> commands = new [] { new Command { Name = "Calendar", Icon = "calendar_month"}, new Command { Name = "Launch", Icon = "rocket"} } ;
}
Image
@akorchev commented on GitHub (Apr 23, 2025): Here is a short demo: ``` <div class="rz-p-12 rz-text-align-center"> <RadzenAutoComplete Placeholder="Select a command..." @bind-Value=@commandName FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" Data=@commands TextProperty="Name" > <Template> <RadzenStack Orientation="Orientation.Horizontal"> <RadzenIcon Icon="@context.Icon" /> <RadzenText Text="@context.Name" /> </RadzenStack> </Template> </RadzenAutoComplete> </div> @code { class Command { public string Name { get; set; } public string Icon { get; set; } } string commandName; IEnumerable<Command> commands = new [] { new Command { Name = "Calendar", Icon = "calendar_month"}, new Command { Name = "Launch", Icon = "rocket"} } ; } ``` <img width="443" alt="Image" src="https://github.com/user-attachments/assets/d871b8b0-bf2b-4ea7-8a8d-031931f5878b" />
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1722