Introducing Headless UI: A Vue Component Framework From Tailwind CSS

Headless UI is the latest and great from Adam Wathan and the Tailwind CSS team! Let's take a look at how this React and Vue Component framework works! #headlessui #tailwind #tailwindcss

0:00 Introduction
3:21 Unstyled Menu Example
07:31 Styled menu example
13:07 Headless UI Website

♡ ♡ ♡
Make Sure To Check These Courses Out On Udemy! 💻

___

Links (and code)

[ChumX]

Wow, I'm really excited for this! Sounds like a really good idea. Together with Tailwind, it'll make creating custom components a breeze.

[ianmadrigalmonkey]

This is totally awesome! I prefer something that works (functionality) and just focus on the style that is need for the brand.

[matthewbeardsley]

Erik, have you done a comparison video on all the different UI Component Libraries, CSS Libraries etc. and perhaps give your 2c on some scenarios; where a beginner should start, what an enterprise application with a large team might look at or the goal of rapid prototyping.
I've just started a project using Vuetify and previously used Buefy, but I've looked at Ant Design, Bootstrap, Element etc!! For Vuetify, my goal was speed.

[Mac]

Erik which VS code theme you're using?? it looks smooth and clean :)

[abdulazeezolanrewaju]

Thank you very much sir!... How do you see chakrauivue

[shadeersadikeen]

headless ui not working with nuxt 3.can you help with that ?

[dyunior]

Thanks Erik with "ch". :D will check this out.

[MatiasVerdier]

I think the majority of people in the comments are not understanding what a headless component is and what is the use case, this is not like Vuetensils, those components are just regular components without styles.

The main difference of headless components with regular components is that the author of the library is not imposing a specific markup or classes in order for the components to work, it is just the behavior and you can choose how to compose the different parts, you can choose to mix other components or HTML elements and of course, add your own styles.

I would recommend reading the post below from Adam Wathan to understand what this is all about. The article talks about renderless components, a concept that is used internally to develop this kind of library

[greghawthorne]

looking into the Composition API, has anyone tried using this in Nuxt?

[doniyorismoil]

Hi Eric I'm fresh in Vue. Your channel is helping me more explore Vuejs, thanks!

[skgupta]

Sir can you do video on buefy?
It's a non js CSS library

[memesnotmine]

Are threre any css framework like bootstrap-vue ready for vue 3?

[bastachemilasciregis]

For small and fast project, I still prefer Buefy. I will look into these for more custom projects

[shaa]

when a new video of Erik comes out I always like the video and only then watch it :)

[ravense]

Does anyone know what vscode theme that is?

[FaradayAcademy]

Seems like an alternative to Vuetensils.

[patlecat]

@Erik Can you pls do a review and tutorial of Tailwind UI?

[surendrasawant]

Make a video on electron performance measures

[JohnSmith-rnvl]

I turn off add blocker by "ctrl + shift + n" for a new private window to watch your videos. Nuff said I think.

[kaibe]

I get what they're doing here, and I decided to check it out, but... I don't think I'll ever use it, for one key reason - code size.

The popover alone is like 700+ lines of code. And I totally understand why - they're building re-usable components for all use-cases. But I can write a purpose-built popover in less than 50 lines of code. So, it's not for me.

That said, I think it'll be really useful for spiking out ideas/user experiences.