pui

1.0.0-beta.6

A Phoenix LiveView UI toolkit

Retired package: Deprecated - Superseded by 1.0.0 stable release

HexDocs Report package

Current section

Files

Jump to

Readme 39 Versions 2 Dependencies Dependants Files Activity

pui README.md

Raw

README.md

<p align="center">
  <img src="demo/assets/pui-hook.png" alt="PUI Logo" width="200"/>
</p>

# PUI Components

## Headless Components

PUI supports three usage levels:

**Level 1: Low-level Hooks** - Direct Floating UI access
```elixir
<.popover_base phx-hook="PUI.Popover">
  <.button>Trigger</.button>
  <:popup class="custom">Content</:popup>
</.popover_base>
```

**Level 2: Unstyled Components** - Behavior without styles
```elixir
<.menu_button variant="unstyled" class="my-btn">
  Open
  <:item class="my-item">Profile</:item>
</.menu_button>
```

**Level 3: Styled Components** - Ready-to-use defaults
```elixir
<.menu_button variant="secondary">
  Open
  <:item>Profile</:item>
</.menu_button>
```

See [Headless Usage Guide](guides/headless-usage.md) for details.

Operator	Description	Example
name:	Match package name. Supports * wildcards and repo/package form	name:phx* or name:hexpm/phoenix
description:	Full-text search of package descriptions	description:auth
depends:	Packages depending on a given package. Supports repo:package form	depends:ecto or depends:hexpm:ecto
build_tool:	Filter by build tool	build_tool:mix
updated_after:	Packages updated after an ISO8601 datetime	updated_after:2025-01-01T00:00:00Z
extra:	Match custom metadata (key,value). Nested keys are separated by commas	extra:license,MIT