CMD+K Search Modal Tutorial (Part 1)

Preview the live demo here.

Introduction

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:

• TailwindCSS Documentation
• uiwtf

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

Assignment

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 https://github.com/rasreee/cmdk-search-tutorial-skeleton.git

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

yarn install && yarn start

Action Items

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

SearchModalProvider

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

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

SearchModalToggle

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 heroicons.com.

SearchModal

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

Questions?

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