Command Component

Overview

Command puts app actions behind a searchable interface. An inline field can morph into a wider results dropdown, and a ⌘K palette scales in over a dimmed or blurred backdrop. Results stagger in, a shared highlight glides between them, and labels can roll as users move through the list.

Use it when an app has enough actions or destinations that users benefit from finding them directly, such as dashboards, CMSs, project tools, and developer apps. Typing, navigation, and execution must stay instant.

Theme and Interaction Customisation

Choose Dropdown, Palette, or Both, with morph, slide, or fade dropdowns, morph width, palette start scale and fade, clear, dimmed, or blurred backdrops, and shared roundness. Interactions include slide or fill highlights, muted or primary colours, rolling labels, an animated search icon, staggered results, delay, duration, and bounce.

Example Production Use Case

A project management app can put a search field in its header that morphs into a results dropdown, plus a ⌘K palette. Typing “create task” and pressing Enter opens the task form without touching the sidebar.

A CMS can let editors jump to any article or settings page from the palette, keeping them in flow while managing large content libraries.

A developer tool can expose build, deploy, and log commands through the palette, giving power users a keyboard-only workflow alongside the visible menus.

Best Used For

• SaaS dashboards.
• Productivity tools.
• Developer applications.
• Design and creative tools.
• Content management systems.
• Project management platforms.
• Administrative interfaces.
• Feature-rich apps with experienced users.

Not For

Apps with only a handful of obvious actions are better served by a toolbar or clear navigation.

It should never be the only way to find essential features, and it doesn’t replace full search with filters and previews.

Destructive commands like deleting records or changing permissions still need their usual confirmation steps.

Performance Budget

Keep typing and keyboard navigation instant, use efficient matching or debounced server search for large indexes, and never delay input for animations. Cancel outdated stagger sequences when queries change, scope global shortcut listeners, and stop animations when closed.

Accessibility and Mobile

Use a labelled search input with combobox and listbox semantics, arrow keys, Enter, and Escape, and don’t rely on the highlight alone to show the active result. A modal palette needs a dialog label, trapped focus, and focus returned on close. On mobile, show a visible search trigger, fit the keyboard and viewport, and keep results easy to tap. With reduced motion, remove morphing, scaling, and stagger.

Common Mistakes

• Making the palette the only way to navigate.
• Running commands on highlight instead of selection.
• Shortcuts that clash with typing or the browser.
• Applying palette settings to the dropdown or vice versa.
• Letting result stagger slow down navigation.
• Leaving a stale highlighted result after filtering.
• Overusing spring bounce.
• Losing focus when the palette closes.
• Assuming search runs application logic.
• Closing silently when a command fails.
• Ignoring reduced-motion preferences.