PUI Logo

PUI Components

Headless Components

PUI supports three usage levels:

Level 1: Low-level Hooks - Direct Floating UI access

<.popover_base phx-hook="PUI.Popover">
  <.button>Trigger</.button>
  <:popup class="custom">Content</:popup>
</.popover_base>

Level 2: Unstyled Components - Behavior without styles

<.menu_button variant="unstyled" class="my-btn">
  Open
  <:item class="my-item">Profile</:item>
</.menu_button>

Level 3: Styled Components - Ready-to-use defaults

<.menu_button variant="secondary">
  Open
  <:item>Profile</:item>
</.menu_button>