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

[@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.

[@soviut303]

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 👍

[@soviut303]

@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?

[@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)

[@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.

[@YazinS]

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

[@iamnwanguma]

Tailwind makes frontend and styling beautiful for me

[@Syndeer]

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

[@fabhi]

CSS instructors are the most fun to watch!

[@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!

[@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!

[@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

[@gomflo]

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

[@simonswiss]

Thank you! It really is a team effort 👍

[@sumitsharma_002]

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

[@code.design]

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

[@nguimeyabill-gates2577]

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

[@liferc]

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

[@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.

[@AliMoeeny]

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

[@alirezakiani1222]

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

[@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.

[@NamasteProgramming]

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

[@Billiam112]

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

[@robotyang8501]

love headless UI from now on.

[@josegmdev]

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

[@simonswiss]

🙏

[@aghileslounis]

Amazing video as always, so inspiring to do great work

[@octavian0704]

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

[@amankumarverma8494]

So good 💯

[@universecode1101]

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

[@stephan3199]

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

[@esdev]

Simon, You're just Aweeeeesome 🤩🥰

[@sergeitinc]

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

[@danvilela]

I wanna like this video a thousand times!!

[@simonswiss]

One time will do - I appreciate the support!

[@GrahamBillington]

These videos are awesome, they help with learning react too

[@hudson_w]

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

[@eminalizade8998]

Loving TailwindCSS, keep up the good work! 😍

[@adityakadam2256]

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

[@irsyadadl]

Nice & Thank you Simon.

[@endernator]

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

[@__sr__]

Excellent video as always.

[@s4ndeep1203]

That didn't feel like 38 minutes ! loved it

[@MasterPloKoon]

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

[@catreunion]

Thank you Simon!

[@Pixalynx]

I would buy a react course from you !

[@dexter-wy5bo]

excellent video, as always !

[@vOnez212]

Great stuff!

[@jasonhoi85]

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

[@codingwithtien]

Super useful tutorial.

[@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

[@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!

[@trenom]

good stuff learned so much from this video xD

[@sargeantscigar]

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

[@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 😅

[@endernator]

mindblowingly good 🤯👏🏼

[@WidianDAlbie]

Thank you sir for amazing video

[@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 👍

[@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.

[@jameswong3388]

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

[@InfinityFnatic]

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

[@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?

[@pkgoncalves]

Nice work!

[@webdev1943]

nice way to explain , thank you

[@yagorodi]

Amazing 👏

[@matheuscabral4402]

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

[@Ms37maracaibo]

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

[@abacuswithrehan264]

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

[@AndersonSousa33]

What a video!

[@perfect.stealth]

I can fall asleep to this

[@marbot9780]

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

[@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?

[@chbb9027]

What is that font in VSCode?

[@praveenprasad9477]

Anyone know which app this "workflow"??

[@robrechtmeersman8301]

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

[@axelv21]

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

[@adarshdesai3081]

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

[@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?

[@kashnigahbaruda]

MORE PLEASE

[@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.

[@QuangAkita]

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

[@tuscala]

What is your VS Code theme? It's beautiful

[@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 ✨

[@kevingrondin974]

Thanks it’s very cool 👍

[@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

[@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 :)

[@kashnigahbaruda]

Add multiple prop to SelectHeadlessUI component please!

[@yazugaming5573]

which font of your IDE use?

[@rafaeljuniorize]

🤩🥺 Beautiful

[@abdiafrah4907]

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

[@simonswiss]

I do, sometimes 😅

[@milon27]

please create a headless ui playlist

[@panomojame6279]

What is wrong with your non-italics lowercase F?!

[@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 */} ); }

[@bassman2145]

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

[@simonswiss]

I rock with Dank Mono in this video 👍

[@SaeedNeamati]

first liked, then watched

[@AlonGvili]

I really like your code flow, feel good, btw can you show some demos using Remix.run framework instead of NEXT ?;

[@simonswiss]

Haha this is definitely something I want to do and will do 💫

[@joshuagalit6936]

The best !!

[@jimmyj.6792]

Tailwind world 😍😍😍😍 💕💕

[@imsarvesh_]

I am speechless 😶

[@simonswiss]

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

[@abobakerhilal4138]

What is type font it used in vscode? Its nice

[@simonswiss]

Dank Mono

[@LuisPerez-cb4rp]

Thank you 🙏

[@RomeoKhazalia]

Do similar thing with Vue pls.

[@johnrothfield6126]

What about non-react.js users? alpine, stimulus, etc?

[@simonswiss]

So far, only Vue.js (v3)

[@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