pui

1.0.2

A Phoenix LiveView UI toolkit

HexDocs Report package

Current section

Files

Jump to

Documentation 41 Versions 2 Dependencies Dependants Files Activity

pui guides skeleton.md

Raw

guides/skeleton.md

# PUI.Skeleton

`PUI.Skeleton` renders an animated placeholder while the host application is
waiting for content.

## Usage

```heex
<div class="space-y-3">
  <.skeleton class="h-4 w-48" />
  <.skeleton class="h-4 w-72" />
  <.skeleton class="h-24 w-full rounded-xl" />
</div>
```

Skeleton is presentation-only. Render it from the server-owned loading state
and choose dimensions that reserve the same space as the eventual content.

It is marked `aria-hidden="true"` by default because it has no meaningful
content. Add a separate live status or label if the loading state itself needs
to be announced.

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