PUI

Phoenix LiveView UI toolkit

v1.0.0

Components that belong in your codebase.

Ship LiveView that feels alive.

Accessible primitives

Server and browser state

Theme-ready by default

A real working surface

Not a screenshot.
A live composition.

Charts, navigation, menus, tabs, forms, and feedback share one deliberate system while remaining ordinary Phoenix components.

Release workspace

Live component composition

Components

36

Production primitives

Dependencies

01

Phoenix LiveView

Theme modes

03

Light, dark, system

Delivery trend

Last six releases

Live

Release checklist

Keyboard paths Ready
Responsive shell Ready
Theme contrast Ready
Hook lifecycle Ready
Explore the live demo

The system

Less glue.
More product.

01

LiveView native

Function components and focused hooks fit the framework instead of hiding it behind a frontend abstraction.

02

Accessible

Keyboard navigation, focus behavior, and semantic attributes are part of the component contract.

03

Themeable

Semantic CSS variables keep application identity separate from component behavior.

04

Composable

Use styled components, primitives, or the full application shell at the level each screen needs.

From dependency to interface

Add PUI.
Keep building.

The library joins the conventions you already use—Mix dependencies, function components, HEEx, and focused JavaScript hooks.

01

Install

Add the package and let Mix resolve the library alongside Phoenix LiveView.

02

Import

Use PUI once to bring the component catalog into your web modules.

03

Compose

Build ordinary HEEx with styled components, primitives, and application layouts.

{:pui, "~> 1.0"}

Start with PUI

Your next interface
starts in LiveView.

Read the documentation