After spending some time recently researching various ways of building modern UIs I came to one sad conclusion: if one wants to build a modern interactive application in Phoenix (+ LiveView) there are not many choices of complex components, like for example a dropdown with search. Incorporating existing solutions requires data manipulation that are not easy to keep track of especially in LiveView context.

That’s how headless was born - a collection of unstyled, UI components for Phoenix and Phoenix LiveView.

https://github.com/teamon/headless

Goals & Rules

• Provide unstyled Phoenix components as building blocks for your own UI components

• If something can be achieved with HTML and CSS only, it should be done with HTML and CSS only (no-JS)

• Where JS is required, use Alpine.js

• Use Alpine.data() instead of inline markup

• Components must work with standard Phoenix controllers (dead views)

• Components must work with Phoenix LiveView

• Components must work with standard Phoenix forms

• Components must be accessible (aria attributes, keyboard navigation, focus, etc.)

Non-goals

Providing 100+ HTML components - headless should focus only on tricky components that are non-trivial to implement correctly, something like Headless UI for React and Vue.

Future goals

In the perfect world there would be a collection of headless components and then some UI libraries built on top of that providing elegant styling.

Status

Very very early, Proof of Concept stage.

So far I did an example <.toggle> component that uses a checkbox under the hood and my nemesis <.combobox/> that tried to leverage all the things that we get with Phoenix & LiveView and provide a good client-side experience on top of that.

I would love to hear any feedback on the idea itself, the implementation, etc.