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.
01
قسمت 1
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.
02
قسمت 2
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.
03
قسمت 3
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.
04
قسمت 4
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.