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
Demo + docs: https://pui.sukacipta.com
HexDocs: pui v1.0.0-beta.18 — Documentation
Hex.pm: pui | Hex
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!
Most Liked
csokun
Nice work!
Popular in Announcing
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance








