Skeleton
A placeholder preview of content before the data is loaded, using animated pulse effects to indicate that content is on its way and reduce perceived loading time.
Default
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.Circular
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.Card
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.Profile
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.
Table
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.Feed
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.