Command

A searchable command palette for fast, keyboard-driven navigation and actions. Use for application-wide search, quick actions, keyboard shortcut menus, and any interface where users need to find and execute commands efficiently.

Default

A basic command palette with grouped items, icons, and keyboard shortcuts. The CommandInput provides instant filtering as you type, while CommandGroup sections organize items into logical categories. Use CommandShortcut to display keyboard accelerator hints alongside item labels.
Loading example…

Command Dialog

Use CommandDialog to wrap a command palette in a dialog with an optional keyboard shortcut. Set Shortcut="Ctrl+I" to register a global shortcut that toggles the dialog. The CommandDialog handles keyboard registration and cleanup automatically, eliminating the need to manually inject IKeyboardShortcutService.
Loading example…

With Groups

Use CommandGroup with a Heading parameter to organize items into named sections, separated by CommandSeparator dividers. Groups that have no matching items during a search are automatically hidden. This pattern helps users scan long command lists and find related actions quickly.
Loading example…

Disabled Items

Set Disabled="true" on a CommandItem to make it non-interactive. Disabled items render with opacity-50 and cursor-not-allowed, and are skipped during keyboard navigation. Use this for actions that are temporarily unavailable based on the current application state.
Loading example…

Custom Variant

Use the Class parameter on Command to apply custom Tailwind CSS for project-specific styling. This example uses a teal gradient background and themed border to create a branded command palette that matches your application's design system. You can also style individual items and groups with custom classes.
Loading example…

Virtualized (Large Lists)

Use CommandVirtualizedGroup to efficiently render 1,000+ items using virtualization. Set MaxDisplayCount to 0 for unlimited items. The ItemSearchText function provides the text used for filtering, while ItemValue supplies the value emitted on selection. This pattern is essential for icon pickers, user directories, and other data-heavy command palettes.
Loading example…

Server-Side Lazy Loading

Supply an ItemsProvider instead of Items to fetch only the slice currently in view — ideal for data that lives in a database or API. Requires EnableLazyLoading. The provider receives the scroll range and the active search text and returns the matching slice plus a total count, so the component never materializes the full collection. This example pages through 5,000 catalog products with simulated network latency.
Loading example…