Skeleton

Use to show a placeholder while content is loading.

Installation

uvx django_shadcn@latest add skeleton

Usage

<c-skeleton class="h-4 w-[250px]" />

The component ships no dimensions of its own. Give it the size and shape of whatever it stands in for.

It fills with bg-accent, which is the same value as bg-muted in the default palette. The demos below sit on the page background so the shapes stay visible.

Examples

Card

<div class="flex flex-col gap-3">
  <c-skeleton class="h-[125px] w-[250px] rounded-xl" />
  <div class="space-y-2">
    <c-skeleton class="h-4 w-[250px]" />
    <c-skeleton class="h-4 w-[200px]" />
  </div>
</div>

Avatar and text

<div class="flex items-center gap-4">
  <c-skeleton class="size-12 rounded-full" />
  <div class="space-y-2">
    <c-skeleton class="h-4 w-[250px]" />
    <c-skeleton class="h-4 w-[200px]" />
  </div>
</div>

Standing in for a card

<c-card>
  <c-card.header>
    <c-skeleton class="h-5 w-[160px]" />
    <c-skeleton class="h-4 w-[220px]" />
  </c-card.header>
  <c-card.content class="space-y-2">
    <c-skeleton class="h-4 w-full" />
    <c-skeleton class="h-4 w-[80%]" />
  </c-card.content>
</c-card>