Building a command palette with Tailwind CSS, React, and Headless UI

In this video I'll walk you through the steps to build a fully accessible command palette using Tailwind CSS, React, and the new combobox component in Headless UI.

Chapters:

00:00 Intro
00:10 What we're building
00:34 Command palette examples
01:13 Our starting point
03:00 The Dialog component
04:41 Styling the Dialog
08:28 The Combobox component
13:17 Displaying the projects data
17:05 Styling the active project
19:03 Wiring up the search
22:25 Handling empty states
23:54 Handling page navigation
27:17 Creating a custom keyboard shortcut
30:49 Adding subtle transitions
34:19 Resetting the search query state
36:30 Looking back at our journey
37:33 Outro