Skeleton

A placeholder loading indicator. CSS-only animation with animate-pulse on a muted background. Use className to control size and shape.

Import

import { Skeleton } from "chunks-ui";

Basic Usage

<Skeleton className="h-4 w-[250px]" />

Circle

<Skeleton className="size-12 rounded-full" />

Card Skeleton

Compose multiple skeletons to create loading placeholders for complex layouts:

<div className="flex items-center gap-4">
  <Skeleton className="size-12 rounded-full" />
  <div className="flex flex-col gap-2">
    <Skeleton className="h-4 w-[180px]" />
    <Skeleton className="h-3 w-[120px]" />
  </div>
</div>

Props

This component accepts all standard <div> props. Use className to control size, shape, and border radius.