sucipto

sucipto

PUI - Phoenix LiveView UI component toolkit

Hi everyone! I’ve been working on a UI component library for Phoenix LiveView called PUI, and just published the first alpha. Sharing it here to get some early feedback from the community!


How it started

It began as a personal itch — I needed solid headless behavior for Select, Combobox, Dropdown, and Tooltip in LiveView. I started handcrafting the primitives using Floating UI for positioning. Once the headless layer worked, I figured I might as well add styling too, so I took inspiration from shadcn/ui and Base UI for the visual defaults.

It’s currently powering my own side projects, and I’m open-sourcing it in case it’s useful to others.


What is PUI?

A collection of accessible, theme-ready components built specifically for Phoenix LiveView + Tailwind CSS v4. Drop in use PUI and you get consistent, composable UI pieces without pulling in a heavy frontend layer.

Components:

  • Forms: Input, Textarea, Checkbox, Radio, Switch, Select
  • Actions: Button, Dropdown
  • Overlays: Dialog, Popover, Tooltip
  • Feedback: Alert, Toast/Flash, Loading
  • Data Display: Progress, Badge, Accordion, Tabs

Why still alpha?

The component API is still evolving — I want the freedom to make breaking changes based on feedback before committing to a stable API. Treat it as early-access for now.


Quick install

# mix.exs
{:pui, "~> 1.0.0-alpha"}

Requires Phoenix LiveView ~> 1.1 and Tailwind CSS v4.


Links

Would love to hear from the community — does the three-level headless approach feel useful? Any components you’d expect that are missing? Feedback, issues, and PRs are very welcome!

https://github.com/suciptoid/pui

Most Liked

csokun

csokun

Nice work!

Where Next?

Popular in Announcing Top

martinthenth
Hello everybody :wave: Recently, some of my colleagues talked about database ids and uuids and their problems, and I remembered the pain...
New
mikehostetler
I’m excited to announce Jido, a framework providing foundational primitives for building autonomous agent systems in Elixir. While develo...
New
oltarasenko
Dear Elixir community, After a year of development, bug fixes, and improvements, we are proudly ready to share the release of Crawly 0.1...
New
grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 52341 488
New
wojtekmach
Hey everyone! Req is an HTTP client for Elixir that I’ve been working on for quite some time. There is already a lot of HTTP clients out...
New
RobertDober
Earmark is a pure-Elixir Markdown converter. It is intended to be used as a library (just call Earmark.as_html), but can also be used as...
239 12560 134
New
archan937
It is a well-know topic within the Elixir community: “To mock or not to mock? :)” Every alchemist probably has his / her own opinion con...
New
markmark206
simple_feature_flags is a tiny package that lets you turn features on or off based on which environment (e.g. localhost, staging, product...
New
handnot2
Samly can be used to enable SAML 2.0 Single Sign On in a Plug/Phoenix application. This library uses Erlang esaml to provide plug enabl...
New
wfgilman
I’ve cleaned up and open sourced three financial libraries I was using for my company. They are bindings for the APIs of these three comp...
New

Other popular topics Top

sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 42920 311
New
chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
hariharasudhan94
lets say i have a sample like a = 20; b = 10; if (a > b) do {:ok, "a"} end if (a < b) do {:ok, b} end if (a == b) do {:ok, "equa...
New
aesmail
Hello guys, I have finally made it. I created an admin interface for a framework. It’s been on my todo list for years and with the curre...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New

We're in Beta

About us Mission Statement