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