Skeleton

Default

<div class="flex items-center gap-3">
	{ui skeleton, class: 'h-10 w-10 rounded-full' /}
	<div class="flex flex-1 flex-col gap-2">
		{ui skeleton, class: 'w-1/2' /}
		{ui skeleton, class: 'w-1/3' /}
	</div>
</div>

The skeleton is a muted block, full width and one line tall. It has no shape params: set the shape with width, height and radius utilities in class, h-10 w-10 rounded-full for a round avatar and w-1/2 for a short line. It is aria-hidden, since it holds no content, so put the busy state on the region around it.

In a card

{ui card, class: 'max-w-sm'}
	<div
		class="flex flex-col gap-3"
		aria-busy="true"
	>
		{ui skeleton, class: 'h-32' /}
		{ui skeleton /}
		{ui skeleton, class: 'w-2/3' /}
	</div>
{/ui}

Set aria-busy="true" on the container so a screen reader waits for the real content. The pulse is an opacity fade in CSS alone, and under prefers-reduced-motion it fades slowly instead of stopping.

To load in place, render the skeletons in a :block fragment and have it fetch the real one with hx-trigger="load". The server returns the final HTML and it replaces the skeletons.

Param	Default	Description
class	''	added to skeleton, e.g. 'h-12 w-12 rounded-full' for its shape
attrs	[]	any other attributes, e.g. ['id' => 'row']

Params