Command
Fast, composable, unstyled command menu for Blazor.
Spotlight Command Palette
A beautiful, production-ready command palette with glassmorphism effect inspired by kokonutui.com and Fumadocs. Features smooth animations, backdrop blur, and global ⌘K / Ctrl+K support.
Features:
- Global keyboard shortcut: ⌘K / Ctrl+K
- Glassmorphism with backdrop-blur and subtle transparency
- Smooth height animations for list changes
- Elegant fade-in/fade-out transitions
- Works across all pages in the demo site
- Built with Dialog and Command primitives only
Height Animation Component
The Spotlight Command Palette above uses the reusable HeightAnimation component to provide smooth transitions when content height changes. This component can be used with any dynamic content.
Customizable CSS Variables:
--height-animation-duration: Animation duration (default: 200ms)--height-animation-timing: Timing function (default: cubic-bezier(0.4, 0, 0.2, 1))
Usage Example:
<HeightAnimation Config="@_config">
<Command>
<CommandInput />
<CommandList>
<!-- Dynamic content -->
</CommandList>
</Command>
</HeightAnimation>
@code {
private HeightAnimationConfig _config = new() {
ContentSelector = "[role=\"listbox\"]",
InputSelector = "[data-command-input-wrapper]"
};
}Custom Animation Timing:
.fast-animation {
--height-animation-duration: 150ms;
}
.bounce-animation {
--height-animation-timing: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}Components that benefit from HeightAnimation
- Command palette with filtering
- Combobox with dynamic options
- Select dropdowns with search
- Collapsible content sections
- Any component with content that changes height dynamically
Command Palette (Overlay)
A full command palette activated with a keyboard shortcut.
Basic Command Menu
Embedded command menu with search and items.
Grouped Commands
Organize commands into logical groups with headings.
With Keyboard Shortcuts
Show keyboard shortcuts alongside commands.
Disabled Items
Disable specific items that are currently unavailable.
Empty State
Show a custom message when no results match.
Complex Example
Combining all features: groups, icons, shortcuts, and disabled items.
Lazy Loading (Large Lists)
Efficiently handle large datasets with lazy loading. Items are loaded on-demand as you scroll.
Keyboard Navigation
Use arrow keys to navigate items, Enter to select, and Escape to close the palette.
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| OnValueChange | EventCallback<string> | — | Callback invoked when a command item is selected. |
| ChildContent | RenderFragment? | null | CommandInput and CommandList elements. |
| Disabled | bool | false | On CommandItem: prevents selection when true. |
| Value | string | — | On CommandItem: the value passed to OnValueChange. |
| Heading | string? | null | On CommandGroup: heading text for the group. |
| Placeholder | string? | null | On CommandInput: placeholder text. |