Headfull (Headless UI) logic

[Rolanddoda]

Context

I recently saw Headless UI and I really the idea and the solution if offers.

Introduction to the problem

I have used UI frameworks but, for many components I had to use a different design which was not possible with the chosen UI framework props/options. So I had to either create those components from scratch or hack/modify the UI framework component to match the design.

Creating them from scratch was difficult because I had to implement cross-browser support, accessibility, sync with the UI framework props, making sure it's flexible enough etc.
So I chose to go with hacking a specific UI component to match the design and I have to say that it's a nightmare in terms of implementation and code readability. (because you are hacking things to work)

IDEA

Headless UI offers unstyled components and the user can style them as they want and that gives a lot of flexibility.
However, I think giving a default style to the components it's great. So I don't think Vuetify should offer unstyled components by default.

But... it would be AWESOME if there is an option to completely disable UI styling for a component.

Real example

Most of the components offered, completely match the desired Design.
However there is some components like buttons which we want to have a completely different design in terms of borders, height, display of labels, append & prepend icons display & animations, different states design (on hover, focus etc).
It would be awesome if we could just turn-off the component's styling and apply our own.