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";
<Skeleton className="w-full" />Examples
Composition: Skeleton within a Media Object
The Skeleton component can be included within components. You can also pass Tailwind utility classes for further control.
import { MediaObject, MediaObjectMedia, MediaObjectContent } from "@ngrok/mantle/media-object";
import { Skeleton } from "@ngrok/mantle/skeleton";
<MediaObject className="w-full max-w-96 items-center">
<MediaObjectMedia>
<Skeleton className="h-12 w-12 rounded-full" />
</MediaObjectMedia>
<MediaObjectContent className="space-y-3">
<Skeleton className="w-full" />
<Skeleton className="w-4/5" />
</MediaObjectContent>
</MediaObject>API Reference
The Skeleton accepts the following props in addition to the standard HTML div attributes.