Built with actual AvenUI components — not screenshots
Button
Badge
Alert
Progress
Avatar
Toggle + Stat
Uptime
Built for the Elixir way
Designed around Phoenix LiveView's strengths — not fighting against them.
Zero JS by default
Every component works with pure LiveView server rendering. JS hooks are opt-in for dropdowns and modals.
You own the code
mix aven_ui.add copies source files into your project. No black boxes, no version lock-in.
Full dark mode
CSS variable tokens, not Tailwind class toggling. Zero flash of unstyled content on load.
LiveView streams ready
Table supports phx-update="stream" for O(1) DOM patching. Built for real production apps.
Accessible
ARIA roles, keyboard navigation, and focus management built into every component by default.
Form-native
Input and Select integrate directly with Phoenix.HTML.FormField and Ecto changesets.
Up in four steps
Add to mix.exs
{:aven_ui, "~> 0.1", github: "khemmanat/aven_ui"}Install components
mix deps.get
mix aven_ui.add --allImport in web.ex
defp html_helpers do
quote do
use AvenUI, :components
end
endAdd CSS + JS
# assets/css/app.css
@import "./avenui.css";
# assets/js/app.js
import { AvenUIHooks } from "./hooks/aven_ui"