Skeleton

Skeleton is used to display the loading state of some component.

Demo

You can use it as a standalone component.

Next.js Copy
<div className="sm:w-[500px] w-[300px] p-4">
<div className="animate-pulse flex space-x-4">
  <div className="flex-1 space-y-3 py-1">
    <div className="h-5 bg-slate-200"></div>
    <div className="h-5 bg-slate-200"></div>
    <div className="h-5 bg-slate-200"></div>
  </div>
</div>
</div>

Or to wrap another component to take the same height and width.

Next.js Copy
<div className="sm:w-[500px] w-[300px] p-4">
<div className="animate-pulse flex space-x-4">
  <div className="flex-1 space-y-3 py-1">
    <div className="h-10 bg-slate-200"></div>
  </div>
</div>
</div>

Circle and Text Skeleton

Next.js Copy
<div className="sm:w-[500px] w-[300px] p-4">
<div className="animate-pulse flex flex-col space-y-4">
  <div className="rounded-full bg-slate-200 h-10 w-10"></div>
  <div className="flex-1 space-y-3 py-1">
    <div className="h-2 bg-slate-200 "></div>
    <div className="h-2 bg-slate-200 "></div>
    <div className="h-2 bg-slate-200 "></div>
    <div className="w-[75%] h-2 bg-slate-200 "></div>
  </div>
</div>
</div>

Circle and Text Skeleton variant 2

Next.js Copy
<div className="sm:w-[500px] w-[300px] p-4">
<div className="animate-pulse flex space-x-4">
  <div className="rounded-full bg-slate-200 h-10 w-10"></div>
  <div className="flex-1 space-y-3 py-1">
    <div className="h-2 bg-slate-200"></div>
    <div className="h-2 bg-slate-200"></div>
    <div className="h-2 bg-slate-200"></div>
    <div className="h-2 bg-slate-200"></div>
  </div>
</div>
</div>

Modal

Breadcrumb