A complimentary UI library for the Phoenix Framework and Phoenix LiveView.
Below are the necessary insructions for installing and using Phoenix UI.
Follow the official guide for setting up Tailwind CSS in a Phoenix project.
Available in Hex , the package can be installed by adding phoenix_ui to your list of dependencies in mix.exs:
defp deps do
[
{:phoenix_ui, "~> 0.1.1"},
]
end
Add a new path pattern to assets/tailwind.config.js so Tailwind can import and utilize Phoenix UI css classes:
const plugin = require('tailwindcss/plugin')
module.exports = {
content: [
'./js/**/*.js',
'../lib/*_web.ex',
'../lib/*_web/**/*.*ex',
# Allows PhoenixUI css to be processed by JIT.
"../deps/phoenix_ui/**/*.*ex",
],
darkMode: "class",
plugins: [],
theme: {
extend: {},
},
plugins: [
plugin(function({ addVariant }) {
# Enables explicit form error styling.
addVariant('invalid', '&.invalid:not(.phx-no-feedback)')
})
],
};
There are multiple ways to import components. We recommend importing components in your application {app}_web.ex view_helpers function:
defmodule MyAppWeb
...
defp view_helpers do
quote do
...
# PhoenixUI macro which imports all components and JS interactions
use PhoenixUI
# Or import components individually
import PhoenixUI.Components.{Button, Tooltip, ...}
...
end
end