Components Skeletons

Skeletons

Static placeholder shapes for opt-in loading states. The complement of skeletons.js, which emits per-archetype skeletons during Alpine-AJAX navigation — this helper is for static markup the page author wants to render up-front.

<koala-skeleton>

Shapes 5 shapes

Text

shape="Text"

Title

shape="Title"

Block

shape="Block"

Avatar

shape="Avatar"

Card

shape="Card"

Realistic composition

Combine shapes to rough-match the layout that's about to arrive. Use class="w-…" to vary the widths so the skeleton doesn't look uniform.

Props

Attribute	Values	Notes
shape	Text, Title, Block, Avatar, Card	Default `Text`.
class	Tailwind classes	Merged — typically used to override width (`w-96`, `w-full`).

Do & don't

Skeleton matches the real card layout — same heading height, same body line count

Do Match the skeleton's shape to the real content. A wrong-shape placeholder causes a visible reflow when the data lands.

Generic animate-pulse rectangles unrelated to the real layout

Don't Don't ship a one-size-fits-all skeleton. The pulse is comforting only when it tracks the real layout; mismatched skeletons feel worse than a brief blank.