Skeleton

Use to show a placeholder while content is loading. By using a Skeleton, you can give the user an idea of what the content will look like, reducing the perceived loading time and CLS (Cumulative Layout Shift).

import { Skeleton } from "@ngrok/mantle";

<Skeleton className="w-full" />

Skeleton Media Object

The Skeleton component can be included within components. You can also pass Tailwind utility classes for further control.

import { MediaObject, MediaObjectMedia, MediaObjectContent, Skeleton } from "@ngrok/mantle";

<MediaObject>
	<MediaObjectMedia>
		<Skeleton className="h-12 w-12 rounded-full" />
	</MediaObjectMedia>
	<MediaObjectContent className="space-y-3">
		<Skeleton className="w-[250px]" />
		<Skeleton className="w-[200px]" />
	</MediaObjectContent>
</MediaObject>