PhiaUI - UI component library for Phoenix LiveView

charlenopires

Hi everyone

I’ve been working on PhiaUI, an open-source UI component library for Phoenix LiveView, and I wanted to share it with the community.

The project is still evolving, but it already includes 534 components and a growing ecosystem of demos and documentation.

What is PhiaUI?

PhiaUI is a shadcn/ui-inspired component library built specifically for Phoenix LiveView, focusing on composable HEEx components, minimal JS, and full integration with the Phoenix ecosystem.

The design philosophy is:

Stateless HEEx function components
Zero heavy JS dependencies
Full Phoenix / LiveView integration
Ejectable components (you own the code)
TailwindCSS-first design
Accessibility (WAI-ARIA support)
Enterprise-ready dashboard widgets

Interactive components use LiveView JS commands or lightweight hooks, avoiding frameworks like Alpine or React whenever possible.

Component coverage

The library includes components across many categories such as:

Forms & Inputs
Data tables and grids
Navigation
Dialogs / overlays
Dashboard shells
Analytics widgets
Enterprise UI patterns

Examples include:

rich text editor
kanban boards
activity feeds
command palette
dashboard KPI widgets
filters and bulk action bars
date pickers and calendars
charts wrappers
advanced form components

Live Demo

You can explore a live demo here:

Demo

16 Phoenix LiveView demo apps

To demonstrate real-world usage, I also built 16 complete Phoenix LiveView demo applications using the library:

GitHub examples

https://github.com/charlenopires/PhiaUI-samples

These apps demonstrate patterns like:

dashboards
CMS interfaces
data management tools
complex forms
analytics interfaces

Documentation

Full documentation:

Installation is simple:

# mix.exs
def deps do
  [
    {:phia_ui, "~> 0.1.12"}
  ]
end

Feedback and contributions

The project is still in active development, so feedback, issues, ideas, and contributions are very welcome.

Things I’m particularly interested in:

developer experience improvements
component API feedback
accessibility improvements
performance optimizations
new component ideas

If you’re building Phoenix LiveView apps and want a large UI component toolbox , I’d love to hear your thoughts.

Repo feedback and issues are greatly appreciated.

14 comments

/phoenix #library #liveview #component

16 2811 14

2026-06-21 09:11:49 UTC

Showing Posts 1 to 10

Show Best Posts
Show All (oldest first)
Show All (newest first)

vicb335

2 things, gave it a quick look on mobile, most components have their css in some way broken and your GitHub links in the docs points to a non-existent phiaui/phia_ui repo.

The amount of components seems quite large and I see that Claude helped quite a bit (found the actual repo). Just be careful to not generate more than you can manage, good luck and always nice to have more UI toolkits specially with little JS!

Post #1

charlenopires

Thanks a lot for taking the time to check it out and for the feedback!

You’re absolutely right about some things. The project is still very early in development, so a few things like broken CSS in some components and documentation issues (like the GitHub link) can still appear. I really appreciate you pointing that out — it helps a lot.

The idea behind the project came from a personal desire to have a UI toolkit for Phoenix LiveView that feels like TailwindCSS, but with design inspiration from Shadcn UI. I always liked the developer experience of Shadcn and wanted something conceptually similar but focused on LiveView and minimal JavaScript.

About the number of components: the goal isn’t really to grow the number indefinitely. Right now the focus is more on stress-testing the component system, exploring patterns, and then iteratively improving and fixing everything.

Claude has helped in some parts, yes, but the code is not generated blindly. There is always human review involved, including right now while developing the project. The workflow is basically AI-assisted generation + human revision and refactoring.

So the large number of components is more about experimentation and validation, not about shipping a massive library all at once.

And if you have the chance to use it a bit and share more feedback, I’d appreciate it a lot. Real feedback from developers is exactly what helps improve the project. Thanks again!

Post #2

yoavgeva

I think the future is AI-Human collabration, So I am all for it, without it, what the odds we will be able to create those libs? so good luck with your library seem like amazing idea

Post #3

Neophen

You’re absolutely right!

This is the definition of Ai slop, i didn’t wven need to have a look at the code to see multitudes of bugs.

The author also replies with AI generated replies, which just feels like he copy pasted the comment and asked for a reply.

i would stay away from this. This is someone who won’t even review their code. Just use daisy ui or one of the multitude of ui libs for phoenix that actually walked through the code and paid attention to actual usability and quality of code

Post #4

charlenopires

Hi! I’d like to clarify a few things.

First, I don’t speak English fluently, so I use AI to help generate my responses here on the forum. I can read and understand most messages, but writing detailed replies in English is difficult for me, so AI helps me communicate better.

About the library: everyone is free to use whatever tools or UI libraries they prefer. In my case, I will continue developing this library because the goal is personal. I’m building it mainly to use in my own production projects.

The reason for creating a large number of visual components is simple: I don’t want to depend on 3–4 different UI libraries in the same project. My goal is to concentrate everything in one customizable library that covers most interface needs.

My philosophy is also simple: launch first, then improve. If we wait for everything to be perfect before releasing something, nothing ever gets released. So I prefer to put things out, gather feedback, and then iterate and refine the code over time.

I initially created the library using a vibe coding approach. Now I’m entering the next phase: carefully reviewing, analyzing, and refactoring the code. In my opinion, the world is moving toward vibe coding, and trying to ignore that reality doesn’t make much sense. I’m actually grateful to live in this moment because it allows us to move with much more speed.

Before using vibe coding heavily, I built the foundation myself: the first components, the skills, and the sub-agents. This was important so I could properly explain the architecture and provide good context to the AI.

My setup also includes a structured memory and context system:

Neo4j with HyperGraph for knowledge graphs + semantic memory
Vector embeddings via Ollama + Qdrant for intelligent context recall

This helps maintain consistent context so the components remain uniform and behave in the same way across the library.

Finally, thank you for the feedback and for the screenshots. They were very helpful and I already know several areas where I can improve.

And of course, if you’re interested, you’re very welcome to contribute to the project. Feedback, issues, suggestions, or pull requests are all appreciated. Collaboration is always welcome!
https://github.com/charlenopires/PhiaUI

Post #5

dan-klasson

I was just searching for a UI lib and just stumbled on this now. Looks really good, nice initiative. The website looks really nice, too.

One minor thing, you might want to change “showcase” to “components”, as that is what that section is usually called.

Post #6

charlenopires

Thanks for the kind words! I really appreciate it.

Good catch about the suggestion — I’ve already updated “showcase” to “components.” Thanks for pointing that out.

Soon we’ll also have PhiaUI Design, a lib tool inspired by Pencil.dev that will help create Phoenix LiveView “frontends” using PhiaUI components.

Thanks again for the feedback!

Post #7

dan-klasson

PhiaUI Design sounds awesome. Will it be able to “import” the PhiaUI components into the application? I always wanted Figma to export HTM with Tailwind, but it always sucked. Looking forward to seeing that in action!

Post #8

dli

Sounds great, I’d love to explore but the demo site is down (render.com placeholder)

Post #9

mnkhod

I can see that alot of thinking and consideration was put into this project, honestly the best example of AI driven project in my opinion chat

I hope more people hate on this with concrete examples so you can improve the project faster and u thought it through well

If i would recommend, rage bait method is the best method for quick feedbacks. Datastar framework creator does ragebait marketing so well on twitter AND he gets valiable hater feedback which allows him to improve his framework 10/10 loop

Bro if u honestly be able to maintain this 829 component BEAST of a library, u gonna become a new movement