Headless UI: Unstyled, Accessible UI Components by Tailwind Labs

[adamwathan]

I just published a blog post announcing our latest open-source project Headless UI.

Read "Headless UI: Unstyled, Accessible UI Components"

It's a set of completely unstyled, fully accessible UI components for React, Vue, and soon Alpine.js that make is super easy to build custom components without sacrificing the ability to style them with Tailwind.

Check it out and let us know what you think!

[renatodeleao]

Your 2017 post and the following course advanced-vue-component-design are still to this day the most inspirational resources on building reusable components for me! (Don't tell anyone but sometimes I go back the the course videos to remember a few tricks)

I can definitely relate with this project, and after seeing some promising vue projects in this area fall behind, it's exciting to see a team like tailwind behind one! I'll follow it closely! Keep it up

[jackguoAtJogg]

I wonder if I can only style the components with tailwind or I can do it with css-in-js library

[adamwathan]

You can style them with anything you want! This library is totally detached from Tailwind 👍🏻

[jackguoAtJogg]

Thats dope, I'll give a try very soon! Thank you and I really like tailwind as well.

[JoseJuan81]

Does anybody can collaborates with this project or is a closed one?
I have some vue components made them with this concept.

[eric-hc]

It's open source!

[JoseJuan81]

@eric-hc please, can you give a orientation to collaborate?, what is the standard or rules to collaborate?

[eric-hc]

@RobinMalfait would likely be the person to ask

[simonswiss]

Hi @JoseJuan81 👋

Thanks for reaching out! I can't speak for Robin or Adam - who are the key contributors to this library - but I would say that at this point, collaboration/contribution isn't too likely to happen. We're still figuring many of the APIs and ergonomics to shape up this library, and it's probably a bit early to start taking external contributions.

Feedback and suggestions are most definitely appreciated, but I don't think this library specifically is the best place for contributing full components, at least right now.

I might be wrong though, and suggestions/ideas are never frowned upon! In any case, please start with opening an issue and starting a discussion, rather than submitting a PR 👍

[miller-productions]

Looks like something excellent on the way! Great idea @adamwathan

Just wondering, what is the relationship between HeadlessUI and TailwindUI?

In other words, when would someone use one over the other?

e.g.

https://tailwindui.com/components/application-ui/forms/select-menus

vs

https://github.com/tailwindlabs/headlessui/tree/develop/packages/%40headlessui-react#listbox-select

[RobinMalfait]

You don't choose one over the other, you can use them together.

Headless UI, is headless, no styles at all, just functionality. Tailwind UI is html + classes based on Tailwind CSS.
If you want to create a good looking Listbox, then you can use both together.

In your second link, if you look at the example CodeSandbox, then you will notice that we used Tailwind UI classes on top of Headless UI functionality.

[miller-productions]

Thanks Robin,

That's excellent. Exactly how I started using it.

[SethHorsley]

I just published a blog post announcing our latest open-source project Headless UI.

Read "Headless UI: Unstyled, Accessible UI Components"

It's a set of completely unstyled, fully accessible UI components for React, Vue, and soon Alpine.js that make is super easy to build custom components without sacrificing the ability to style them with Tailwind.

Check it out and let us know what you think!

Hey @adamwathan i was wondering if there has been any progress on the alpine.js version?

[hugronaphor]

Most of components have examples at https://alpinejs.dev/components