Skeleton

A loading placeholder that mimics content layout while data loads. Built with DaisyUI's skeleton class on a <div>. Size, shape, and layout are fully controlled via Tailwind utilities in the classes prop.

Basic shapes

Circle, rounded rectangle, square, and single text line.

Text lines

Stack multiple text-height skeletons to simulate a paragraph.

Avatar + text

Common pattern: circular avatar beside name and subtitle lines.

Card

Image area + title + body text + action button placeholder.

List

Five list rows, each with a small icon placeholder and two text lines.

Profile page

Full-page loading state: banner, avatar, stats row, and content paragraphs.

Before / After

Compare the skeleton state to the loaded content side by side.

Grid of cards

Use in a grid layout when loading a list of items.