Skeleton

A Skeleton with no props draws a title bar over three paragraph lines, the default placeholder for a block of text.

Set round to draw the title and paragraph bars as capsules instead of rectangles with small corners.

Set active to run a shimmer across the bars, which tells the reader the content is still on its way.

Set avatar to draw a circle beside the title and paragraph lines, the placeholder for a comment or a profile row.

Set title to a width to shorten the title bar, or to false to draw the paragraph lines on their own.

Set paragraph.rows for the number of lines and paragraph.width for their widths, one value per line.

Skeleton.Button holds the place of a button, with the button's shape and size options and block to fill the row.

Skeleton.Input holds the place of a text field, in three sizes, with block to fill the width of its container.

Skeleton.Avatar draws an avatar placeholder on its own, in three sizes and a square shape.

Skeleton.Image holds the place of a picture, and classNames.content sets the size of its box.

Skeleton.Node is a gray box that holds whatever you put inside it, like an icon or a short line of text.

Pass the real content as children and set loading, and the placeholder gives way to the content once loading ends.

Wrap each list row in its own Skeleton, with a Skeleton.Button holding the place of the row's action until it loads.

A Skeleton with an avatar inside a Card, the placeholder for a profile or a comment while it loads.

A row of stat tiles, each a short title bar for the label over a taller Skeleton.Input for the number, while the metrics load.