Skeleton

The default Skeleton component renders a rectangular placeholder with an animate-pulse animation and muted background. Use the Class parameter with height and width utilities like h-4 w-[250px] to match the dimensions of the content being loaded.

Set Shape to SkeletonShape.Circular to render a round placeholder, ideal for avatar loading states. Combine with rectangular skeletons alongside it to create a complete profile placeholder with name and description lines.

Compose multiple Skeleton elements inside a Card to create a complete card loading state. Match the skeleton dimensions to the expected content layout to provide a seamless transition when data arrives.

A profile section loading state combining a circular avatar skeleton with rectangular text placeholders. Use varying widths on the text skeletons to mimic realistic content patterns where names are longer than subtitles.

A data table loading state with skeleton rows and columns mimicking header and data cells. Use a Separator between the header and body skeletons to match the visual structure of a real DataTable.

A real-world composition showing a social media feed loading state. Each feed item includes a circular avatar skeleton, username and timestamp placeholders, text content lines, and a large image placeholder to match a typical post layout.