Used to show a placeholder while content is loading.
<div class="flex">
<div class="flex items-center space-x-4">
<div class="kt-skeleton size-16 rounded-full"></div>
<div class="space-y-2">
<div class="kt-skeleton h-5 w-[225px]"></div>
<div class="kt-skeleton h-4 w-[175px]"></div>
</div>
</div>
</div>
<div class="kt-card w-full max-w-[460px]" aria-hidden="true">
<div class="kt-card-header">
<div class="space-y-2">
<div class="kt-skeleton h-5 w-[180px] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[120px] motion-reduce:animate-none"></div>
</div>
</div>
<div class="kt-card-content space-y-3">
<div class="kt-skeleton h-4 w-full motion-reduce:animate-none"></div>
<div class="kt-skeleton h-4 w-[92%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-4 w-[70%] motion-reduce:animate-none"></div>
</div>
<div class="kt-card-footer">
<div
class="kt-skeleton h-9 w-[120px] rounded-md motion-reduce:animate-none"
></div>
</div>
</div>
<div class="w-full max-w-[520px] space-y-3" aria-hidden="true">
<div
class="flex items-center gap-3 rounded-lg border border-border border-dashed p-3"
>
<div
class="kt-skeleton size-10 rounded-full motion-reduce:animate-none"
></div>
<div class="grow space-y-2">
<div class="kt-skeleton h-4 w-[40%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[72%] motion-reduce:animate-none"></div>
</div>
<div
class="kt-skeleton h-8 w-[72px] rounded-md motion-reduce:animate-none"
></div>
</div>
<div
class="flex items-center gap-3 rounded-lg border border-border border-dashed p-3"
>
<div
class="kt-skeleton size-10 rounded-full motion-reduce:animate-none"
></div>
<div class="grow space-y-2">
<div class="kt-skeleton h-4 w-[40%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[72%] motion-reduce:animate-none"></div>
</div>
<div
class="kt-skeleton h-8 w-[72px] rounded-md motion-reduce:animate-none"
></div>
</div>
<div
class="flex items-center gap-3 rounded-lg border border-border border-dashed p-3"
>
<div
class="kt-skeleton size-10 rounded-full motion-reduce:animate-none"
></div>
<div class="grow space-y-2">
<div class="kt-skeleton h-4 w-[40%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[72%] motion-reduce:animate-none"></div>
</div>
<div
class="kt-skeleton h-8 w-[72px] rounded-md motion-reduce:animate-none"
></div>
</div>
<div
class="flex items-center gap-3 rounded-lg border border-border border-dashed p-3"
>
<div
class="kt-skeleton size-10 rounded-full motion-reduce:animate-none"
></div>
<div class="grow space-y-2">
<div class="kt-skeleton h-4 w-[40%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[72%] motion-reduce:animate-none"></div>
</div>
<div
class="kt-skeleton h-8 w-[72px] rounded-md motion-reduce:animate-none"
></div>
</div>
<div
class="flex items-center gap-3 rounded-lg border border-border border-dashed p-3"
>
<div
class="kt-skeleton size-10 rounded-full motion-reduce:animate-none"
></div>
<div class="grow space-y-2">
<div class="kt-skeleton h-4 w-[40%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[72%] motion-reduce:animate-none"></div>
</div>
<div
class="kt-skeleton h-8 w-[72px] rounded-md motion-reduce:animate-none"
></div>
</div>
</div>
<div
class="w-full max-w-[760px] rounded-lg border border-border overflow-hidden"
aria-hidden="true"
>
<div class="grid grid-cols-12 gap-3 border-b border-border bg-accent/40 p-3">
<div
class="col-span-4 kt-skeleton h-3 w-20 motion-reduce:animate-none"
></div>
<div
class="col-span-3 kt-skeleton h-3 w-16 motion-reduce:animate-none"
></div>
<div
class="col-span-3 kt-skeleton h-3 w-16 motion-reduce:animate-none"
></div>
<div
class="col-span-2 kt-skeleton h-3 w-12 motion-reduce:animate-none"
></div>
</div>
<div
class="grid grid-cols-12 gap-3 border-b border-border p-3 last:border-b-0"
>
<div class="col-span-4 flex items-center gap-2">
<div
class="kt-skeleton size-8 rounded-full motion-reduce:animate-none"
></div>
<div class="kt-skeleton h-4 w-[140px] motion-reduce:animate-none"></div>
</div>
<div
class="col-span-3 kt-skeleton h-4 w-[90px] motion-reduce:animate-none"
></div>
<div
class="col-span-3 kt-skeleton h-4 w-[100px] motion-reduce:animate-none"
></div>
<div
class="col-span-2 kt-skeleton h-7 w-[64px] rounded-md motion-reduce:animate-none"
></div>
</div>
<div
class="grid grid-cols-12 gap-3 border-b border-border p-3 last:border-b-0"
>
<div class="col-span-4 flex items-center gap-2">
<div
class="kt-skeleton size-8 rounded-full motion-reduce:animate-none"
></div>
<div class="kt-skeleton h-4 w-[140px] motion-reduce:animate-none"></div>
</div>
<div
class="col-span-3 kt-skeleton h-4 w-[90px] motion-reduce:animate-none"
></div>
<div
class="col-span-3 kt-skeleton h-4 w-[100px] motion-reduce:animate-none"
></div>
<div
class="col-span-2 kt-skeleton h-7 w-[64px] rounded-md motion-reduce:animate-none"
></div>
</div>
<div
class="grid grid-cols-12 gap-3 border-b border-border p-3 last:border-b-0"
>
<div class="col-span-4 flex items-center gap-2">
<div
class="kt-skeleton size-8 rounded-full motion-reduce:animate-none"
></div>
<div class="kt-skeleton h-4 w-[140px] motion-reduce:animate-none"></div>
</div>
<div
class="col-span-3 kt-skeleton h-4 w-[90px] motion-reduce:animate-none"
></div>
<div
class="col-span-3 kt-skeleton h-4 w-[100px] motion-reduce:animate-none"
></div>
<div
class="col-span-2 kt-skeleton h-7 w-[64px] rounded-md motion-reduce:animate-none"
></div>
</div>
<div
class="grid grid-cols-12 gap-3 border-b border-border p-3 last:border-b-0"
>
<div class="col-span-4 flex items-center gap-2">
<div
class="kt-skeleton size-8 rounded-full motion-reduce:animate-none"
></div>
<div class="kt-skeleton h-4 w-[140px] motion-reduce:animate-none"></div>
</div>
<div
class="col-span-3 kt-skeleton h-4 w-[90px] motion-reduce:animate-none"
></div>
<div
class="col-span-3 kt-skeleton h-4 w-[100px] motion-reduce:animate-none"
></div>
<div
class="col-span-2 kt-skeleton h-7 w-[64px] rounded-md motion-reduce:animate-none"
></div>
</div>
</div>
<div class="w-full max-w-[620px] space-y-3" aria-hidden="true">
<div class="kt-skeleton h-6 w-[220px] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-4 w-full motion-reduce:animate-none"></div>
<div class="kt-skeleton h-4 w-[98%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-4 w-[91%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-4 w-[83%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-4 w-[70%] motion-reduce:animate-none"></div>
</div>
<div class="flex flex-wrap items-center gap-4" aria-hidden="true">
<div
class="flex items-center gap-3 rounded-lg border border-border p-3 min-w-[220px]"
>
<div
class="kt-skeleton size-12 rounded-full motion-reduce:animate-none"
></div>
<div class="space-y-2">
<div class="kt-skeleton h-4 w-[110px] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[84px] motion-reduce:animate-none"></div>
</div>
</div>
<div
class="flex items-center gap-3 rounded-lg border border-border p-3 min-w-[220px]"
>
<div
class="kt-skeleton size-12 rounded-full motion-reduce:animate-none"
></div>
<div class="space-y-2">
<div class="kt-skeleton h-4 w-[110px] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[84px] motion-reduce:animate-none"></div>
</div>
</div>
<div
class="flex items-center gap-3 rounded-lg border border-border p-3 min-w-[220px]"
>
<div
class="kt-skeleton size-12 rounded-full motion-reduce:animate-none"
></div>
<div class="space-y-2">
<div class="kt-skeleton h-4 w-[110px] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[84px] motion-reduce:animate-none"></div>
</div>
</div>
<div
class="flex items-center gap-3 rounded-lg border border-border p-3 min-w-[220px]"
>
<div
class="kt-skeleton size-12 rounded-full motion-reduce:animate-none"
></div>
<div class="space-y-2">
<div class="kt-skeleton h-4 w-[110px] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[84px] motion-reduce:animate-none"></div>
</div>
</div>
</div>
<div
class="grid grid-cols-2 md:grid-cols-3 gap-4 w-full max-w-[760px]"
aria-hidden="true"
>
<div class="space-y-2">
<div
class="kt-skeleton aspect-square w-full rounded-lg motion-reduce:animate-none"
></div>
<div class="kt-skeleton h-4 w-[72%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[46%] motion-reduce:animate-none"></div>
</div>
<div class="space-y-2">
<div
class="kt-skeleton aspect-square w-full rounded-lg motion-reduce:animate-none"
></div>
<div class="kt-skeleton h-4 w-[72%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[46%] motion-reduce:animate-none"></div>
</div>
<div class="space-y-2">
<div
class="kt-skeleton aspect-square w-full rounded-lg motion-reduce:animate-none"
></div>
<div class="kt-skeleton h-4 w-[72%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[46%] motion-reduce:animate-none"></div>
</div>
<div class="space-y-2">
<div
class="kt-skeleton aspect-square w-full rounded-lg motion-reduce:animate-none"
></div>
<div class="kt-skeleton h-4 w-[72%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[46%] motion-reduce:animate-none"></div>
</div>
<div class="space-y-2">
<div
class="kt-skeleton aspect-square w-full rounded-lg motion-reduce:animate-none"
></div>
<div class="kt-skeleton h-4 w-[72%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[46%] motion-reduce:animate-none"></div>
</div>
<div class="space-y-2">
<div
class="kt-skeleton aspect-square w-full rounded-lg motion-reduce:animate-none"
></div>
<div class="kt-skeleton h-4 w-[72%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[46%] motion-reduce:animate-none"></div>
</div>
</div>
<div class="kt-card w-full max-w-[560px]" aria-hidden="true">
<div class="kt-card-content space-y-4">
<div class="flex items-center gap-4">
<div
class="kt-skeleton size-16 rounded-full motion-reduce:animate-none"
></div>
<div class="space-y-2">
<div class="kt-skeleton h-5 w-[180px] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-4 w-[220px] motion-reduce:animate-none"></div>
</div>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="kt-skeleton h-20 rounded-lg motion-reduce:animate-none"></div>
<div class="kt-skeleton h-20 rounded-lg motion-reduce:animate-none"></div>
</div>
<div class="space-y-2">
<div class="kt-skeleton h-4 w-full motion-reduce:animate-none"></div>
<div class="kt-skeleton h-4 w-[90%] motion-reduce:animate-none"></div>
</div>
</div>
</div>
Demonstrates a realistic skeleton-to-content swap pattern.
<div class="kt-card w-full max-w-[620px]">
<span class="sr-only" role="status" aria-live="polite"
>Loading activity feed</span
>
<div class="kt-card-header" aria-hidden="true">
<div class="space-y-2">
<div class="kt-skeleton h-5 w-[190px] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[140px] motion-reduce:animate-none"></div>
</div>
</div>
<div class="kt-card-content space-y-3" aria-hidden="true">
<div
class="flex items-center justify-between border border-border rounded-lg p-3"
>
<div class="space-y-2 grow">
<div class="kt-skeleton h-4 w-[68%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[44%] motion-reduce:animate-none"></div>
</div>
<div
class="kt-skeleton h-8 w-[72px] rounded-md motion-reduce:animate-none"
></div>
</div>
<div
class="flex items-center justify-between border border-border rounded-lg p-3"
>
<div class="space-y-2 grow">
<div class="kt-skeleton h-4 w-[68%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[44%] motion-reduce:animate-none"></div>
</div>
<div
class="kt-skeleton h-8 w-[72px] rounded-md motion-reduce:animate-none"
></div>
</div>
<div
class="flex items-center justify-between border border-border rounded-lg p-3"
>
<div class="space-y-2 grow">
<div class="kt-skeleton h-4 w-[68%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[44%] motion-reduce:animate-none"></div>
</div>
<div
class="kt-skeleton h-8 w-[72px] rounded-md motion-reduce:animate-none"
></div>
</div>
</div>
</div>
<div class="space-y-4 w-full max-w-[700px]" aria-hidden="true">
<div class="flex gap-4 rounded-lg border border-border p-3">
<div
class="kt-skeleton h-24 w-36 rounded-md shrink-0 motion-reduce:animate-none"
></div>
<div class="space-y-2 grow">
<div class="kt-skeleton h-5 w-[50%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-4 w-[95%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-4 w-[86%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-4 w-[65%] motion-reduce:animate-none"></div>
</div>
</div>
<div class="flex gap-4 rounded-lg border border-border p-3">
<div
class="kt-skeleton h-24 w-36 rounded-md shrink-0 motion-reduce:animate-none"
></div>
<div class="space-y-2 grow">
<div class="kt-skeleton h-5 w-[50%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-4 w-[95%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-4 w-[86%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-4 w-[65%] motion-reduce:animate-none"></div>
</div>
</div>
<div class="flex gap-4 rounded-lg border border-border p-3">
<div
class="kt-skeleton h-24 w-36 rounded-md shrink-0 motion-reduce:animate-none"
></div>
<div class="space-y-2 grow">
<div class="kt-skeleton h-5 w-[50%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-4 w-[95%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-4 w-[86%] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-4 w-[65%] motion-reduce:animate-none"></div>
</div>
</div>
</div>
<div
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 w-full max-w-[900px]"
aria-hidden="true"
>
<div class="kt-card">
<div class="kt-card-content space-y-3">
<div class="kt-skeleton h-4 w-[90px] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-8 w-[120px] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[72px] motion-reduce:animate-none"></div>
</div>
</div>
<div class="kt-card">
<div class="kt-card-content space-y-3">
<div class="kt-skeleton h-4 w-[90px] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-8 w-[120px] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[72px] motion-reduce:animate-none"></div>
</div>
</div>
<div class="kt-card">
<div class="kt-card-content space-y-3">
<div class="kt-skeleton h-4 w-[90px] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-8 w-[120px] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[72px] motion-reduce:animate-none"></div>
</div>
</div>
<div class="kt-card">
<div class="kt-card-content space-y-3">
<div class="kt-skeleton h-4 w-[90px] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-8 w-[120px] motion-reduce:animate-none"></div>
<div class="kt-skeleton h-3 w-[72px] motion-reduce:animate-none"></div>
</div>
</div>
</div>
<div class="kt-card w-full max-w-[620px]" aria-hidden="true">
<div class="kt-card-header">
<div class="kt-skeleton h-5 w-[170px] motion-reduce:animate-none"></div>
</div>
<div class="kt-card-content space-y-4">
<div class="space-y-2">
<div class="kt-skeleton h-3 w-[110px] motion-reduce:animate-none"></div>
<div
class="kt-skeleton h-10 w-full rounded-md motion-reduce:animate-none"
></div>
</div>
<div class="space-y-2">
<div class="kt-skeleton h-3 w-[110px] motion-reduce:animate-none"></div>
<div
class="kt-skeleton h-10 w-full rounded-md motion-reduce:animate-none"
></div>
</div>
<div class="space-y-2">
<div class="kt-skeleton h-3 w-[110px] motion-reduce:animate-none"></div>
<div
class="kt-skeleton h-10 w-full rounded-md motion-reduce:animate-none"
></div>
</div>
<div class="flex gap-2 justify-end">
<div
class="kt-skeleton h-9 w-[90px] rounded-md motion-reduce:animate-none"
></div>
<div
class="kt-skeleton h-9 w-[110px] rounded-md motion-reduce:animate-none"
></div>
</div>
</div>
</div>