Skeleton is a placeholder to display instead of the actual content.
import { Skeleton } from 'primereact/skeleton';<Skeleton width="4rem" height="2rem" />Sample Card implementation using different Skeleton components and Tailwind CSS utilities.
import { Skeleton } from 'primereact/skeleton';
export default function ShapesDemo() {
return (
<div className="card flex items-center justify-center">
<div className="max-w-md w-full space-y-4">
<div className="flex items-start gap-4">
<Skeleton shape="circle" size="3.5rem" />
<div className="flex-1">
<div className="flex items-center justify-between">
<Skeleton width="40%" height="1.75rem" />
</div>
<div className="space-y-1.5 mt-3">
<Skeleton width="100%" borderRadius="4px" />
<Skeleton width="90%" borderRadius="4px" />
<Skeleton width="30%" borderRadius="4px" />
</div>
<Skeleton className="mt-4" height="16rem" />
<div className="flex items-center gap-4 mt-4">
<Skeleton width="4rem" height="1.75rem" />
<Skeleton width="4rem" height="1.75rem" />
</div>
</div>
</div>
</div>
</div>
);
}Various shapes and sizes can be created using styling properties like shape, width, height, size, borderRadius and className.
import { Skeleton } from 'primereact/skeleton';
export default function ShapesDemo() {
return (
<div className="card">
<div className="flex flex-col items-start gap-8 max-w-sm">
<div className="w-full">
<h5>Circle</h5>
<div className="flex items-end gap-4">
<Skeleton shape="circle" size="5rem" />
<Skeleton shape="circle" size="4rem" />
<Skeleton shape="circle" size="3rem" />
<Skeleton shape="circle" size="2rem" />
</div>
</div>
<div className="w-full">
<h5>Square</h5>
<div className="flex items-end gap-4">
<Skeleton size="5rem" />
<Skeleton size="4rem" />
<Skeleton size="3rem" />
<Skeleton size="2rem" />
</div>
</div>
<div className="w-full">
<h5>Rectangle</h5>
<div className="flex flex-col gap-2 w-full">
<Skeleton />
<Skeleton width="12rem" />
<Skeleton width="7rem" />
<Skeleton height="4rem" />
<Skeleton width="12rem" height="4rem" />
</div>
</div>
<div className="w-full">
<h5>Rounded</h5>
<div className="flex flex-col gap-2 w-full">
<Skeleton borderRadius="16px" />
<Skeleton width="12rem" borderRadius="16px" />
<Skeleton width="7rem" borderRadius="16px" />
<Skeleton height="4rem" borderRadius="16px" />
<Skeleton width="12rem" height="4rem" borderRadius="16px" />
</div>
</div>
</div>
</div>
);
}Customize the background color of the skeleton.
import { Skeleton } from 'primereact/skeleton';
export default function ColorDemo() {
return (
<div className="card flex items-center justify-center">
<div className="max-w-md w-full space-y-1.5">
<Skeleton width="100%" borderRadius="4px" className="bg-blue-500/20" />
<Skeleton width="90%" borderRadius="4px" className="bg-red-500/20" />
<Skeleton width="30%" borderRadius="4px" className="bg-yellow-500/20" />
</div>
</div>
);
}Sample Grid implementation using different Skeleton components and Tailwind CSS utilities.
import { Skeleton } from 'primereact/skeleton';
export default function GridDemo() {
return (
<div className="card grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-8">
{Array.from({ length: 6 }).map((_, index) => (
<div key={index} className="border rounded-md border-surface-200 dark:border-surface-700">
<Skeleton width="100%" height="10rem" className="rounded-t-md rounded-b-none" />
<div className="p-4 flex items-start gap-3">
<Skeleton shape="circle" size="3rem" />
<div className="flex-1 flex flex-col gap-2">
<Skeleton width="100%" borderRadius="4px" />
<Skeleton width="90%" borderRadius="4px" />
<Skeleton width="20%" borderRadius="4px" />
</div>
</div>
</div>
))}
</div>
);
}Skeleton uses aria-hidden as "true" so that it gets ignored by screen readers, any valid attribute is passed to the root element so you may customize it further if required. If multiple skeletons are grouped inside a container, you may use aria-busy on the container element as well to indicate the loading process.
Component does not include any interactive elements.