# Phoenix UI

A complimentary UI library for the Phoenix Framework and Phoenix LiveView.

## Installation

Phoenix UI depends on Phoenix 1.6. Before proceeding, please ensure you have either upgraded your existing app to 1.6 or the app you have generated is using 1.6.

### 1. Install Tailwind CSS with Phoenix

Follow the [official guide](https://tailwindcss.com/docs/guides/phoenix) for setting up Tailwind CSS in a Phoenix project.

### 2. Install Phoenix UI

[Available in Hex](https://hexdocs.pm/phoenix_ui), the package can be installed by adding phoenix_ui to your list of dependencies in mix.exs:

```elixir
def deps do
  [
    {:phoenix_ui, "~> 0.1.6"},
  ]
end
```

Documentation can be found at [https://hexdocs.pm/phoenix_ui](https://hexdocs.pm/phoenix_ui).

### 3. Configure Tailwind CSS to Import Phoenix UI Classes

Add a new path pattern to `assets/tailwind.config.js` so Tailwind can import and utilize Phoenix UI css classes:

```diff
module.exports = {
  content: [
    './js/**/*.js',
    '../lib/*_web.ex',
    '../lib/*_web/**/*.*ex',

+    // Allows Phoenix.UI css to be processed by JIT compiler.
+    "../deps/phoenix_ui/**/*.*ex",
  ],
  darkMode: "class",
  plugins: [
+    // Allows form error styling
+    plugin(({ addVariant }) =>
+      addVariant("invalid", ".invalid:not(.phx-no-feedback) &")
+    ),
  ],
  theme: {
    extend: {},
  },
};
```

### 4. Import Phoenix UI Components

There are multiple ways to import components. We recommend importing components in your application `{app}_web.ex` `view_helpers` function:

```elixir
  ...

  defp view_helpers do
    quote do
      ...

      # Phoenix.UI macro which imports all components and JS interactions
      use Phoenix.UI
      # Or import components individually
      import Phoenix.UI.Components.{Button, Tooltip, ...}

      ...
    end
  end
```