Skeleton

A skeleton holds the place of content that is still loading. It shows a muted, pulsing block where the text or the image will appear, so users see the layout of the page before the data arrives. The skeleton has no size of its own. A parent with grid, a width and a height stretches the skeleton to that size, so the parent sets the shape of the content that the skeleton stands in for.

UsageCopy Anchor Link

import { Skeleton } from "@biem/ui/components/ui/skeleton";

export function SkeletonDefault() {
	return (
		<div className="grid h-4 w-full max-w-sm">
			<Skeleton/>
		</div>
	);
}

ExamplesCopy Anchor Link

ParagraphCopy Anchor Link

Text often depends on data that arrives after the page itself, such as a product description or a summary. Skeletons in the shape of a paragraph tell users that text will appear in this place before its first word has loaded. Since every skeleton takes its width and height from the element around it, the placeholder can match the length of the text it stands in for.

ImageCopy Anchor Link

A product photo often takes longer to load than the text beside it. In its place, a skeleton receives the size of the image from the element around it, so users see where the picture will appear and how much room it will take.

API ReferenceCopy Anchor Link

Skeleton shows a muted, pulsing block in place of content that is still loading. It renders a div and has no props of its own.