Pine UI 🌲 — the Pines component library for Phoenix LiveView.

Pines is an Alpine.js + Tailwind CSS component library. This package ports it to Phoenix function components, with declarative attr/slot APIs, dark mode, and the LiveView plumbing that Alpine needs in order to survive DOM patching.

Installation

def deps do
  [{:pine_ui_phoenix, "~> 0.2.0"}]
end

Three further steps are required — the components will not work without them. They are covered in full in the Installation guide:

1. Tell Tailwind to scan this package, or every class it uses will be purged from your production build and the components will render unstyled.

   // Tailwind v3 — tailwind.config.js
   content: [..., "../deps/pine_ui_phoenix/lib/**/*.ex"]
   
   /* Tailwind v4 — app.css */
   @source "../../deps/pine_ui_phoenix/lib";

2. Import the stylesheet, which carries the [x-cloak] rule that stops overlays flashing their contents on page load.

   @import "../../deps/pine_ui_phoenix/priv/static/pine_ui.css";

3. Install Alpine and wire up pineDom(), so Alpine state survives LiveView patches.

   import { pineDom, PineHooks } from "../../deps/pine_ui_phoenix/priv/static/pine_ui.js"
   
   const liveSocket = new LiveSocket("/live", Socket, {
     params: { _csrf_token: csrfToken },
     hooks: { ...PineHooks },
     dom: pineDom()
   })

Usage

Import everything in your html_helpers/0:

defp html_helpers do
  quote do
    use PineUiPhoenix
    # ...
  end
end

Then use any component:

<.card title="Getting started">
  <p>Pine UI brings Pines to Phoenix.</p>
  <:footer>
    <.button>Read the docs</.button>
  </:footer>
</.card>

Avoiding name collisions

A stock Phoenix 1.7/1.8 app generates a CoreComponents module with its own <.button>, <.table> and <.modal>. Since both are imported into the same scope, you must resolve the clash one of three ways:

use PineUiPhoenix, except: [:button, :table, :modal]
use PineUiPhoenix, only: [:command, :marquee, :rating]
use PineUiPhoenix, prefix: :pine   # <.pine_button>, <.pine_table>

prefix: generates delegating wrappers, which means the prefixed calls lose compile-time attribute validation. only:/except: keep it, so prefer them where you can.

Upgrading from v0.1.x

Every v0.1.x function name still works and is re-exported here as a deprecated delegate, so upgrading does not break your templates. See the Upgrading to v0.2 guide for the old-to-new mapping.