A fast search for pages and actions, opened with a key. The palette has empty, typing and no results states.

What is included

• A palette with grouped results
• Keyboard hints in the footer
• An empty and a no results state
• A search field with a suggestion list
• Recent and popular chips

Where to use it

Use it in a SaaS app, an editor or a docs site.

Design notes

This command palette and search suggestions follows a simple rule: Real components save time because you change a property and the whole set updates. Rename the variants to match your design system and connect the colors to your own styles. It includes a palette with grouped results, keyboard hints in the footer, an empty and a no results state, so you can start from a finished layout and change only what you need.

Built for editing

Spacing follows a 4 point scale and layers have clear names, so developers can find what they need. Fonts are free on Google Fonts, and every color can be changed from the fill panel. You also get a search field with a suggestion list and recent and popular chips.

How to use it

Copy the component with the copy button and paste it into Figma with Ctrl+V or Cmd+V. The layers keep their auto layout, so you can edit text, colors and spacing. The text uses Plus Jakarta Sans and a few free Google Fonts. Install them first so the text looks the same.

Light version

This listing is the light version. The dark version is listed separately.