pui

1.0.1

A Phoenix LiveView UI toolkit

HexDocs Report package

Current section

Files

Jump to

Documentation 41 Versions 2 Dependencies Dependants Files Activity

pui guides empty.md

Raw

guides/empty.md

# PUI.Empty

`PUI.Empty` is a composable empty state for collections, search results, and
first-use screens.

## Usage

```heex
<.empty>
  <:icon><PUI.Icon.icon name={:search} class="size-6" /></:icon>
  <:title>No projects found</:title>
  <:description>Try a different search or create a new project.</:description>
  <:actions>
    <.button>Create project</.button>
  </:actions>
</.empty>
```

The title is required. Description, icon, actions, and additional content are
optional slots owned by the application.

## Host-owned presentation

Pass a `class` when PUI should provide the semantic structure but your design
system owns the presentation:

```heex
<.empty class="gap-3">
  <:title>No notifications</:title>
  <:description>You are all caught up.</:description>
</.empty>
```

Application-owned icons should be passed through the icon slot. PUI does not
assume an icon library for empty-state content.

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