Is it possible to make a Liveview UI component library?

Phoenix Forum Questions / Help
1

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
2

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

1 Like
3

Thanks!

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?

4

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 (github.com) - 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 (github.com) - Though it is not a component library, it contains the best practices for building both functional components and Live Components.

2 Likes
5

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!

6

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!

2 Likes