The principle of Headless UI is elementary. Go to the library website, find the desired interface element, download the file in .js or .vue format and upload this component to your project.
You will find everything you need from the available interface elements:
drop-down menus,
item lists,
radio buttons,
modal dialogs,
pop-up windows,
radio buttons.
In addition to ready-made blocks, there are wrappers-animations. That is, external components into which you can load any of the already existing interface elements to animate it.
Each component comes with detailed documentation explaining where to insert links and interface elements. No additional settings are required.
The entire Headless UI library conforms to modern web design standards by default, but you can easily change the appearance of elements if you know how TailwindCSS works.
What’s the problem?
Some components are strictly linked to the design they represent. They are designed to please the designs that can be found at the time of their creation, but do not have regard to the future improvements.
Mostly the specifications and consumers of the component are changed by the product owner or UX-designer. Developers should understand that the component can change in the future, and the change of the component should not take too much time. Otherwise, changing the component for the purpose of hunting new additional improvements will be a hindrance and will lead to the creation of new errors.
Headless components cover all these problems, having nothing in common with the user interface, but only ensuring functionality. If you provide a stable, well-tested functionality, changing the design of the component will be much easier for the developers.