Is it possible to make a Liveview UI component library?

For example, there are lots of UI component libraries on React.

Is it possible on Liveview?

I have no idea how to handle JS, CSS.

1 Like

Yes. petalframework/petal_components: Phoenix + Live View HEEX Components ( is one such example.

1 Like


It use tailwind (common CSS) and Phoenix.LiveView.JS module to don’t make *.js, *.css file.

How about if the component has a JS hook?

If you want to understand the structure of a component along with JS Hooks, please look at surface-ui/surface_bulma: A set of simple Surface components based on Bulma ( - They contain some typical examples.
However, if you want examples only from LiveView and Heex - please look at the source code of fly-apps/live_beats ( - Though it is not a component library, it contains the best practices for building both functional components and Live Components.


Actually, this question was another version of Is there a good way to embed a phoenix app to another phoenix app?.

Inspired by GitHub - surface-ui/surface_catalogue, I succeeded to embed one phoenix application into another phoenix project.

Thank you so much!

I love the question. I asked about any accessible component UI libraries on Reddit. If there is an easy way to reuse component UI libraries, then it helps and avoids reinventing the a11y wheels!