Headless UI is a library that provides completely unstyled accessible UI components. Or in other words, you are responsible for providing your own markup and styles, which results in a completely custom look for your components. In this short series, we’ll use Vue 3 to explore some of the components that are available and style them using Tailwind CSS.
Menu Dropdown
Let's begin by installing Headless UI and playing around with the "Menu" (Dropdown) component. We take a look at some of the customization options available, learn about scoped slots, and style the dropdown with Tailwind CSS.
Dialog
Next up, we'll review the Dialog (Modal) component. We'll review the different layers of a Dialog and how to animate them independently. Lastly, we'll apply a few customizations.
Radio Group
Now, let's have a look at Radio Groups, which are one of my favorite components to style. I like to provide more detail to what the user is selecting and make it more visually appealing along the way.
Tabs
To finish up this mini-series, let's review the Tabs component. Tabs are quite simple to implement. We'll consider two different styles for doing so.