Command Component

A fast, composable command menu with keyboard-driven search and selection.

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.

Press the keyboard shortcut to search...

⌘ K

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 proper command palette that appears as an overlay on the screen. Click the button or press Ctrl+K to open.

Basic Command Menu

A simple command menu with search and selection. Try typing to filter items.

Grouped Commands

Organize commands into logical groups with headings.

With Keyboard Shortcuts

Display keyboard shortcuts alongside commands (visual only). Use arrow keys to navigate and Enter to select.

Disabled Items

Items can be disabled to prevent selection.

Empty State

Shows a custom message when no results match the search query. Try searching for "xyz".

Complex Example

Combining all features: groups, icons, shortcuts, disabled items, and search filtering.

Lazy Loading (Large Lists)

Efficiently handle large datasets with lazy loading. Items are loaded on-demand as you scroll. This example contains 2275 icons across three libraries: Lucide (1665), Feather (286), and Heroicons (324).

Keyboard Navigation

Available Keyboard Shortcuts:

↑ ↓ Navigate through items
Enter Select the highlighted item
Esc Clear search query
Type Filter items in real-time