# Skeleton

<Preview>
<div class="flex items-center gap-4">
  <div class="skeleton size-10 shrink-0 rounded-full"></div>
  <div class="grid gap-2">
    <div class="skeleton h-4 w-[150px]"></div>
    <div class="skeleton h-4 w-[100px]"></div>
  </div>
</div>
</Preview>

## Usage

Use the `skeleton` class with sizing utilities to create loading placeholders.

```html
<div class="flex items-center gap-4">
  <div class="skeleton size-10 shrink-0 rounded-full"></div>
  <div class="grid gap-2">
    <div class="skeleton h-4 w-[150px]"></div>
    <div class="skeleton h-4 w-[100px]"></div>
  </div>
</div>
```

## Examples

### Avatar

<Preview>
<div class="flex items-center gap-4">
  <div class="skeleton size-12 rounded-full"></div>
  <div class="grid gap-2">
    <div class="skeleton h-4 w-32"></div>
    <div class="skeleton h-4 w-48"></div>
  </div>
</div>
</Preview>

### Card

<Preview class="w-full max-w-md">
<div class="card w-full @md:w-auto @md:min-w-sm">
  <header>
    <div class="skeleton h-4 w-2/3"></div>
    <div class="skeleton h-4 w-1/2"></div>
  </header>
  <section>
    <div class="skeleton aspect-square w-full"></div>
  </section>
</div>
</Preview>

### Text

<Preview class="w-full max-w-md">
<div class="grid gap-2">
  <div class="skeleton h-4 w-full"></div>
  <div class="skeleton h-4 w-5/6"></div>
  <div class="skeleton h-4 w-2/3"></div>
</div>
</Preview>

### Form

<Preview class="w-full max-w-md">
<div class="grid gap-4 w-full max-w-sm">
  <div class="skeleton h-4 w-24"></div>
  <div class="skeleton h-9 w-full"></div>
  <div class="skeleton h-4 w-32"></div>
  <div class="skeleton h-9 w-full"></div>
</div>
</Preview>

### Table

<Preview class="w-full max-w-md">
<div class="grid gap-3 w-full">
  <div class="skeleton h-8 w-full"></div>
  <div class="skeleton h-8 w-full"></div>
  <div class="skeleton h-8 w-full"></div>
</div>
</Preview>

### RTL

Skeleton blocks are direction-neutral. Use logical layout utilities around them when spacing depends on direction.

<Preview>
<div dir="rtl" class="flex items-center gap-4">
  <div class="skeleton size-10 shrink-0 rounded-full"></div>
  <div class="grid gap-2">
    <div class="skeleton h-4 w-[150px]"></div>
    <div class="skeleton h-4 w-[100px]"></div>
  </div>
</div>
</Preview>