Getting Started

PUI is a comprehensive collection of Phoenix LiveView UI components built with Tailwind CSS. It provides beautiful, accessible, and highly customizable components that work seamlessly with Phoenix LiveView.

Need complete control over presentation? The Headless Components guide shows how to use low-level hooks and the .Primitive modules.

Installation

Add pui to your list of dependencies in mix.exs:

def deps do
  [
    {:pui, "~> 1.0"}
  ]
end

Then run:

mix deps.get

Setup

1. Import Components

Add use PUI to your LiveView modules to import all components:

defmodule MyAppWeb.MyLive do
  use MyAppWeb, :live_view
  use PUI

  def render(assigns) do
    ~H"""
    <.button>Click me</.button>
    """
  end
end

2. Include CSS

Import the PUI stylesheet in your app.css:

@import "../../deps/pui/assets/css/pui.css";

3. Include JavaScript Hooks

Add PUI hooks to your LiveSocket configuration in app.js:

import { Hooks as PUIHooks } from "pui";

const liveSocket = new LiveSocket("/live", Socket, {
  hooks: { ...PUIHooks },
  params: { _csrf_token: csrfToken },
});

Component Overview

PUI provides components in several categories:

<div class="flex flex-wrap items-center gap-3">
  <.button>Primary Button</.button>
  <.button variant="secondary">Secondary</.button>
  <.button variant="outline">Outline</.button>
</div>
<div class="mt-4 max-w-sm">
  <.input id="quick-input" name="quick" label="Sample Input" placeholder="Type here..." />
</div>

Design Principles

• Accessible — Built with WAI-ARIA patterns and keyboard navigation
• Composable — Mix and match components freely with slots
• Customizable — Override styles with Tailwind classes or drop down to the .Primitive modules
• LiveView Native — Designed specifically for Phoenix LiveView with server-side state management