Figma command menu (⌘+K) components

The command menu began as a developer habit and ended up in most products built in the last few years. Press Command K, type three letters, hit Enter. Linear popularised it, Figma has its own, and a user who finds one arrives at your app expecting the same key to work. These 5 components and 69 variants cover the overlay, the input, the results, and the small keyboard hints that teach people the shortcut exists.

Six command bar types

The command bar covers command only, actions, users, users menu, integrations menu, and an empty state, each drawn on a 1,440px by 960px desktop frame so you review the overlay in context rather than floating on grey. Command only is the plain list. Actions and users show results grouped by kind, which is what a real palette returns once it searches pages, people, and settings at the same time.

The two menu types add a second level for choosing a specific user or integration. Every type also has a Text property, default or stacked, deciding whether a result is one line or a title with a description underneath. Stacked costs vertical space and buys disambiguation, which matters most when two results share a name.

The empty state is the one to get right

A command menu gets judged twice: in the half second before anyone types, and the moment a search returns nothing. The empty state variant handles the second, and it is the variant teams forget until QA finds it. A palette that returns a blank panel for a typo reads as broken, while one that repeats the query and offers a next step reads as considerate.

The resting state deserves as much thought, because whatever you list before typing is a claim about what the product is for. Recent items are the safe answer, popular actions the ambitious one. For the wider pattern, empty states is its own set. Products with deep settings pages gain the most from all of this, since a command menu is the shortest route to a switch buried four levels down.

Items at 44px, shortcuts in chips

The dropdown menu item comes in four leading types, plain, icon, avatar, and a status dot, each with default, hover, and focus states, at 44px for a single line and 64px stacked with a description, the same size logic as the dropdown menu items used elsewhere in the kit. The input is 576px by 56px with placeholder, filled, and focus states.

Shortcut chips come in single-key and dual-key versions, 33px and 115px wide, so the menu can teach the keyboard path while the mouse is still doing the work, which is how anyone actually learns these things. There is a 640px by 52px footer row, and the results section has a scrollable variant for lists longer than the panel. It sits on top of whatever navigation you already have: a sidebar for browsing, a command menu for people who already know where they are going, and a context menu for the actions that belong to whatever is under the pointer.

Building one in Figma

In a prototype the command bar is an overlay, opened from a key trigger so Command K genuinely works in presentation mode, with a scrim behind it and click outside to dismiss. Figma's prototyping guide covers triggers and overlays.

Two decisions are worth making in the file rather than in code review. Whether the input filters as you type, which in production makes the palette a combobox with a listbox popup, where the W3C's combobox pattern sets the keyboard expectations: arrows to move, Escape to close, Enter to run. And whether the menu searches content or runs commands, since the two need different result groupings.

Figma's own actions menu, which also opens with Command K, is firmly the second kind and worth ten minutes of study before you design yours. The whole set exists twice over, tuned separately for light and dark.

Once the interaction is settled, the same menus exist in code. Untitled UI React command menus are open source, built with Tailwind CSS and React Aria, with the keyboard filtering, focus handling, and result navigation done for you.