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

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 54260 488
New
jakub-zawislak
Hi everyone, I’m coming from the Symfony (PHP) framework. I like Phoenix, but it has a one thing that was build much better in the Symfo...
New
pkrawat1
Hey guyz We at @aviabird are working on a payment library in elixir/phoenix. We are targeting March 2018 to add 56 Gateways to it. Have...
New
bryanjos
Hi, I wanted share a small library we at Revelry Labs made for rendering react components from the server side. There are instructions fo...
New
josevalim
Hi everyone, We would like to announce that Plataformatec is working on a new MySQL driver called MyXQL. Our goal is to eventually integ...
New
ityonemo
Currently just starting out on a new mini-project - getting zig NIFs to run in elixir. https://github.com/ityonemo/zigler The idea here...
New
tfwright
After working on it for a couple of months and using it in production for most of that time, today I’ve released LiveAdmin, a LiveView ba...
New

Other popular topics Top

minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
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 54260 488
New
aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
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
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
TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
274 42716 114
New

We're in Beta

About us Mission Statement