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
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
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex









