DEV Community

Cover image for CMD+K Search Modal Tutorial (Part 1)
Lesley Chang
Lesley Chang

Posted on

CMD+K Search Modal Tutorial (Part 1)

Preview the live demo here.


In this tutorial, we will build a ⌘K Search Modal, which is what it sounds like - a modal for searching content that can be opened by the ⌘K keyboard shortcut. The tutorial will be comprised of two parts:

  • Part 1: The Assignment (the one you're reading)
  • Part 2: My Implementation & Walkthrough

Part 2 will be released to the public on December 31st, one week from when Part 1 (this article) is published.

If you are reading this after both have been released already but want to practice building from scratch according to a list of requirements, try to force yourself to spend at least a week on Part 1 before looking at Part 2.

Otherwise, feel free to skip ahead to Part 2 to read the walkthrough of how I built this ⌘K Search Modal.

What we're building

For reference, here are some ⌘K Search Modals built by others:

We're going to be building a simple version of the ⌘K Search Modal with the following requirements:

  • Clicking the toggle button or pressing ⌘K keyboard shortcut opens the modal
  • Clicking outside or one of the search results hides the modal
  • Changing the search input text automatically updates the search results


The end goal is a module that exports components SearchModalProvider and SearchModalToggle that clients can use to render a ⌘K Search Modal. Internally, it will render a component called SearchModal.

Clients (apps that depend this module) can use these components by:

  1. Wrap their app with SearchModalProvider
  2. Render SearchModalToggle wherever they want to display it

Project Setup

Clone or fork the Github repo for the skeleton code.

git clone
Enter fullscreen mode Exit fullscreen mode

From project root, install the dependencies, and run the app.

yarn install && yarn start
Enter fullscreen mode Exit fullscreen mode

Action Items

Given the skeleton code, implement SearchModalProvider, SearchModalToggle, and SearchModal.


Edit SearchModalProvider.tsx to implement SearchModalProvider according to the following requirements:

  • Uses React Context API
  • Holds state of the SearchModal
  • Renders SearchModal


Edit SearchModalToggle.tsx to implement the toggle button component according to the following requirements:

  • Toggles the modal open when either:
    • ⌘K keyboard shortcut is pressed
    • Button is clicked
  • When hovered, the background color is darkened by 20%
  • When clicked, the background color is darkened by 40%

For the left-most icon, you can use any icon you like. Otherwise, use the search icon from


Edit SearchModal.tsx to implement the search modal according to the following requirements:

  • Changes to the input automatically updates the search results
  • Clicking outside or selecting a search result hides the modal
  • Users can press Tab to focus on the search result
  • When a search result is focused, users can press Enter to select it


If you run into any issues with the tutorial, please feel free to open an issue against the Github repo.

Top comments (0)