PUI UI Components

A comprehensive collection of Phoenix LiveView components built with Tailwind CSS. Beautiful, accessible, and fully customizable.

Get Started View on GitHub

Installation

Add PUI to your Phoenix LiveView project in just a few steps.

1. Add the dependency to your mix.exs

def deps do
  [
    {:pui, github: "your-org/pui"}
  ]
end

2. Run mix deps.get

mix deps.get

Quick Start

Import all components with a single line of code.

Add use PUI to your LiveView module to import all components automatically.

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

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

Components

Inputs

Text inputs, checkboxes, radio buttons, switches, and more.

Select

Single and multi-select dropdowns with search support.

Buttons

Various button styles, sizes, and variants for your application.

Dropdown

Dropdown menus with items, separators, and shortcuts.

Dialog

Modal dialogs for confirmations and complex interactions.

Popover

Floating UI popovers for contextual information.

Alert

Alert components for important messages and warnings.

Toast

Toast notifications with beautiful animations.

Container

Layout containers for structuring your UI.

Tabs

Tab navigation for organizing content into sections.

Progress & Badges

Progress bars and badge components for status indicators.

Headless Components

Unstyled components with custom CSS framework support.

Built for LiveView

Native Phoenix LiveView components with real-time updates and minimal JavaScript.

Tailwind CSS

Styled with Tailwind CSS for easy customization and theming support.

Accessible

ARIA-compliant components with keyboard navigation and screen reader support.

Overview