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

[@IanZamojc]

I especially like how you've shown some of the traps (window location vs router, resetting search too early, etc.) and how to avoid them.

[@simonswiss]

Thanks! Yeah, they let you appreciate the subtle details even more, things you'd take for granted 👍

[@IanZamojc]

@June@97 You should post this as a top level comment. Also, you'll have to specify which font you mean; the one on the web page or the one in the text editor?

[@amirreza-dev]

There are some programmers in the world who makes programming much lovely, sweet and enjoyable You my sir are one of those people Thank you so much

[@zyishai]

Agree 100%!!!!

[@simonswiss]

Awwwwe thank you so much 🙏

[@nemethricsi]

@@simonswiss I wanna echo these compliments. Really awesome tutorial! Can I ask what font are you using in your editor? 🙈 Thank you Simon

[@simonswiss]

@@nemethricsi Thank you so much! The font is called Dank Mono.

[@nemethricsi]

@@simonswiss OMG I’m using the same font that’s why it was familiar 😂 But looked even more better in the video. Maybe less font-weight :) Tailwind is awesome! I’m just starting getting familiar with it.

[@YazinS]

The difference with Tailwind videos is obvious. These guys aren't just building cool stuff.. they're having fun! Love these videos

[@victornwanguma2427]

Tailwind makes frontend and styling beautiful for me

[@Syndeer]

@@victornwanguma2427 Yeah I absolutely agree with you Tailwind css is so much fun and easier

[@BarisPalabiyik]

Can't believe I just watch the whole thing, even tho I knew most of the things in it. That's says a lot about the pace and presentation.

[@simonswiss]

Thank you so much! Yeah I really try to respect everyone's time, even in longer form video like this one.

[@eyalch]

Small suggestion: In the useEffect's dependencies array you're providing isOpen, which is required because isOpen is indeed being used inside the callback (to get an opposite value). This causes the keydown event listener to be re-created every time the command palette is opened and closed. A nice and easy solution to this is instead of passing the new value directly to setIsOpen we can pass a callback which accepts the current value and returns a new one, then we can remove isOpen from the dependencies array. Thank you for producing such high quality content!

[@simonswiss]

That's a great tip, thank you!

[@xadden]

Code wise, I believe Exo means instead of using setIsOpen(!isOpen), use setIsOpen(value => !value)

[@eyalch]

@@xadden Exactly!

[@som.shekhar]

Firstly, I don't think so recreating the function has any significant performance impact at all. Secondly, even if you pass a callback to `setIsOpen` you would now be recreating the callback function `(isOpen) => !isOpen` on every toggle -- which is a little less obvious, but true. So, essentially you're swapping in creation of one function for the other. Let me know your thoughts on this.

[@eyalch]

@@som.shekhar It's not only the function that gets re-created, but the event listener itself (together with the handler function)

[@fabhi]

CSS instructors are the most fun to watch!

[@somerandomchannel382]

Another great design idea of a ComboBox is ofcourse Tailwind's Search in Documentation . It's really flexible and handy to find any classes you want know the tailwind prefix for :)

[@juraso7312]

tailwindcss search in documentation is build with algolia not combobox, search on tailwindui documentation is build with combobox

[@hazemturki]

Lost my mind trying to get a combobox to work using listbox, so glad to this happened. I coincidentally landed on headless ui home page. And saw it, and that made me so happy. Thanks for all the work!

[@aghileslounis]

Amazing video as always, so inspiring to do great work

[@universecode1101]

Awesome man 🚀 These three together 🔥 Tailwind is a game changer, thanks ✌🏻

[@gomflo]

Really amazing work, the subtle details, the production, how you explain, very well done.

[@simonswiss]

Thank you! It really is a team effort 👍

[@hot4mix]

Genuinly impressive flow. i will watch you code anything. literally anything xD

[@simonswiss]

Thank you!

[@JimOHalloran]

Wow, that was a ride! I built a select box with a search field on the drop down (Vue + Headless UI) a while ago, but I was never 100% happy with it. I think it's time to rebuild using the new combo box components!

[@simonswiss]

Haha nice, let us know how you go!

[@Billiam112]

Fantastic content! More in headless ui would be highly appreciated! ❤️

[@code.design]

this tutorial is something else. I came for tailwind and learned as a bonus about nextjs. Awesome stuff!

[@josegmdev]

Amazing video as always! you do an awesome job with this channel 🙌🏼

[@simonswiss]

🙏

[@alirezakiani1222]

It was great. I always use your tutorials. Thank you for being

[@sumitsharma_002]

Thank you it was really informative. @headlessui is such a cool library component to have in your projects.

[@nguimeyabill-gates2577]

I was actually stuck implementing a search component, he just answered my questions. Thanks a lot!

[@AliMoeeny]

Isn't this just pure gold, thank you very much.

[@octavian0704]

Amazing mate !!! really well done and nicely explained. Thanks for sharing.

[@eminalizade8998]

Loving TailwindCSS, keep up the good work! 😍

[@hudson_w]

You're amazing. This is so cool. Keep having fun and inspiring others

[@adityakadam2256]

It is such an amazing video. It makes me try it out by myself. Thanks a ton.

[@GrahamBillington]

These videos are awesome, they help with learning react too

[@StayFlyJW]

You, sir, are a dev that I need to learn under. Your design and teaching style is wonderful. Also, we need workflow… gotta replace ClickUp pronto.

[@stephan3199]

Thanks so much! You really inspire me to be as good as you in the future

[@sergeitinc]

It's just some gift for us. Thank you so much.

[@__sr__]

Excellent video as always.

[@robotyang8501]

love headless UI from now on.

[@codingwithtien]

Super useful tutorial.

[@irsyadadl]

Nice & Thank you Simon.

[@dexter-wy5bo]

excellent video, as always !

[@NamasteProgramming]

This tutorial so good, I didn't even notice light theme IDE

[@catreunion]

Thank you Simon!

[@webdev1943]

nice way to explain , thank you

[@WidianDAlbie]

Thank you sir for amazing video

[@s4ndeep1203]

That didn't feel like 38 minutes ! loved it

[@liferc]

Damn man! This is way too good. Please make video with other headless components it would be a lot better learning from you

[@trenom]

good stuff learned so much from this video xD

[@esdev]

Simon, You're just Aweeeeesome 🤩🥰

[@jasonhoi85]

Great tutorial, i will use the same toolbox to make my command panel

[@vOnez212]

Great stuff!

[@amankumarverma8494]

So good 💯

[@endernator]

mindblowingly good 🤯👏🏼

[@dingen636]

Top quality video as always! I know Tailwind is ment for implementation with JS frameworks but would be amazing to have documentation on how to use Tailwind in a Wordpress theme. Thanks for all the hard work!

[@dexter-wy5bo]

This video should give you everything you need for that. It's possible and not hard at all, the only difference is you have to build/compile your tailwind css before pushing to the site, packaging the theme, etc... kzbin.info/www/bejne/pXiZiYOvZtlkgaM

[@lukasmolcic5143]

If you are building a custom theme from scratch I would recommend setting up twig or some other templating language so that you can build components, working with tailwind without components is not that great, I used to use the timber plugin to achieve that, but these days we are usually going for headless wp + next for cms based websites.

[@simonswiss]

Tailwind is definitely not limited or meant purely for implementation with JS frameworks! You could argue in fact that since it generates "just CSS", it works really well with WordPress, .NET, anything really. Headless UI, on the other hand, is definitely a JS framework implementation.

[@yagorodi]

Amazing 👏

[@Pixalynx]

I would buy a react course from you !

[@danvilela]

I wanna like this video a thousand times!!

[@simonswiss]

One time will do - I appreciate the support!

[@pkgoncalves]

Nice work!

[@endernator]

soooo goooooooodddd.... please more ui with nextjs and headlessui.... it is a match made in heaven by the nerd gods 😇🤓

[@kevingrondin974]

Thanks it’s very cool 👍

[@austintoddj]

Love the video. Having a tough time translating the “custom keyboard shortcut” to a Vue app. Do you have any examples or links that might offer some insight into the specific keyboard event handling?

[@MasterPloKoon]

Would love to see a Vue tutorial next time when using Headless UI (:

[@vilijanmonev896]

Great video as always! Thank you very much, your skills are impressive. I have one question, in the Combox.Input I believe it is a common practice to perform the filter once the user has stopped typing or some amount of milliseconds has passed in order not to create computational overheat. Is there is a way to achieve something like this?

[@matheuscabral4402]

Great video!!! Any idea on how to prefetch on option selection?

[@kashnigahbaruda]

MORE PLEASE

[@AndersonSousa33]

What a video!

[@rafaeljuniorize]

🤩🥺 Beautiful

[@tofustew]

Another suggestion - omit the `text-sm` classname on the input field to avoid auto-zoom for iPhone users (Android, too, maybe?). Mobile Safari zooms in on input fields with text smaller than 16 px (and `text-sm` produces 14px text). Anyway, awesome video!

[@LuisPerez-cb4rp]

Thank you 🙏

[@VinceKronlein]

This is so great, thanks Simon. I know it's a long shot, but any chance we can get a tutorial of this in Vue without Headless UI? My clients are not yet using Vue 3 so we're not able to use Headless UI yet. Either way, thanks for the great video.

[@sargeantscigar]

Fantastic video, learned a lot! How can I implement your 🤙 terminal? It’s great!

[@craftsmanhafeez]

does the combobox.button component mentioned in the headless ui docs have any special functionality. Can i wrap the combobox.input and combobox.button components in a form tag and use it like a normal searchbox for an ecommerce site with the combobox.options component giving the user search suggestions as he types?

[@InfinityFnatic]

What is the cursive font and how to set it up? Thank you!

[@marbot9780]

Good Morning - thank you for the great video! Where can I download the Start and End environments? Greetings Markus

[@dibbyo456]

Awesome

[@joshuagalit6936]

The best !!

[@GergelyCsermely]

Thanks

[@axelv21]

wow, instant rebuilding my autocomplete with this! Goodby downshift.

[@amanueltigistu8268]

What a great way of Building UI. Headless UI is really fantastic. But the framework support is limited to react & vue. There are really good framework like solid-js & svelte. Is there anything work to make Headless UI available for framework other than vue & react? One thing that I recommend is to make the core package separated from the framework implementations. In these way we can make Headless UI available for all of Us. Thanks.

[@hiimaustin]

I don’t know that you will see my comment or not but that you so much😍❤️ This is help me a lot🙏🏻❤️

[@simonswiss]

I see your comment today! Glad you enjoyed, the video, Austin 🙏

[@hiimaustin]

@@simonswiss yess man! I love it

[@jameswong3388]

Hi anyone know how to do the navigation on vuejs3, tried @change="window.location.href..." but doesn't work

[@clemensheithecker]

Thanks for the great video Simon! What theme and font are you using? It makes it easy to read and follow your code.

[@simonswiss]

I usually use Night Owl + Dank Mono. This one uses Night Owl *Light* + Dank Mono ✨

[@chbb9027]

What is that font in VSCode?

[@jimmyj.6792]

Tailwind world 😍😍😍😍 💕💕

[@abacuswithrehan264]

Hello Loved the video. Can you share your current video font , theme and vscode settings please don't ignore, please 🙏

[@tuscala]

What is your VS Code theme? It's beautiful

[@praveenprasad9477]

Anyone know which app this "workflow"??

[@davidluhr]

Another great guide Simon! Small suggestion: the combobox option markup can be a NextJS `` component with an `` tag for native navigation instead of `useRouter`. If I'm not mistaken, this will also take care of closing the Dialog on a route change.

[@simonswiss]

Ah, nice one! I think it was still good to show the "onChange" prop on the Combobox component for general purposes, but for this specific scenario your solution sounds pretty elegant if it indeed closes the Dialog in the route change process 👍

[@imsarvesh_]

I am speechless 😶

[@simonswiss]

Lucky you can use the command palette to do a search instead of talking to Siri/Google/Alexa 🤣

[@Ms37maracaibo]

Awesome! Could you make a command pallette using Nuxt 3 Tailwind and latest Headless UI ? Thanks !!!

[@adarshdesai3081]

could you guys share the source code got the project management app?

[@abdiafrah4907]

Great content!!!! But one question, who uses white theme on code editor looool

[@simonswiss]

I do, sometimes 😅

[@QuangAkita]

Could you please let me know font for code editor in this video!

[@SaeedNeamati]

first liked, then watched

[@yazugaming5573]

which font of your IDE use?

[@msnxcrj]

I would like to know the vs code font he is using. I really love those!

[@msnxcrj]

I figured it out, its "dank mono font"

[@simonswiss]

That's the one!@@msnxcrj

[@fpigeonjr]

🤩woah

[@abobakerhilal4138]

What is type font it used in vscode? Its nice

[@simonswiss]

Dank Mono

[@bassman2145]

Does anyone know what font is being used in the code editor?

[@simonswiss]

I rock with Dank Mono in this video 👍

[@jasonji1152]

Can someone explain why `relative` fixed the stacking issue at 7:25? Thx

[@simonswiss]

There are many CSS classes that create a new "stacking context", which is necessary here to stack the modal window above the "fixed" element. position:relative happens to be one of those. Super confusing for sure, but here's a good read: developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

[@simonswiss]

Arguably I could/should have used the "isolate" utility class here - since its intent it to create a new stacking context. But that also confuses a lot of folks 😅

[@robrechtmeersman8301]

You'll want to stop propagation on your keydown event, because Ctrl+K is a reserved shortcut in Chrome on Windows.

[@kashnigahbaruda]

Add multiple prop to SelectHeadlessUI component please!

[@vojica6055]

Can someone help me, how to config file if my design is like this: i need on large desktop 1920px 1080 a container which is 1440grid width, can you help me how to edit that container is 1440 width and not 1526px (2xl) thanks a lot :)

[@milon27]

please create a headless ui playlist

[@ShajidHasan]

Great video, Simon! What's that font you're using in your editor?

[@simonswiss]

Thanks! It's called Dank Mono

[@hazemturki]

Next Up: MacOS spotlight search please!!

[@simonswiss]

Oooooh I was meant to show that one in my intro too - totally forgot, but I think Figma + devtools + vscode were enough demos to drive the point home. Spotlight is a fantastic example of a great command palette!

[@DanStroot]

In desktop Safari, if I use command+k to open and close the search bar the screen scrolls to the bottom after I close the modal. Doesn't happen in Chrome or Firefox. Anyone seeing this? Any ideas?

[@DanStroot]

Dialog model works fine, no issues. Put a Combobox in the model, no problem. The Combobox.Input seems to be the culprit. If that is inside the modal and you close with keyboard the page scrolls to the bottom on Safari. If I comment the Input out the page does not scroll.

[@DanStroot]

import { useState, useEffect } from 'react'; import { Dialog, Combobox } from '@headlessui/react'; export function Test() { let [isOpen, setIsOpen] = useState(false); /* Handle Keyboard Input */ useEffect(() => { function handleKeyDown(event) { event.preventDefault(); event.stopPropagation(); /* e key for error - ha! */ if (event.key === 'e' && (event.ctrlKey || event.metaKey)) { setIsOpen((value) => !value); } } window.addEventListener('keydown', handleKeyDown); return () => { window.removeEventListener('keydown', handleKeyDown); }; }, []); /* minimal code to reproduce the issue */ return ( setIsOpen(false)} className='fixed top-0 z-10'> Hello {/* comment this out to see it work properly */} ); }

[@coledrain2158]

Sadly we won't be seeing Simon here again 😞

[@coledrain2158]

@Aroyan He is no longer on Tailwind Lab team.

[@AnsgarSteinkamp]

New videos of Simon: kzbin.info