---
title: "Skeleton"
description: "A placeholder in the shape of content that is still loading. It pulses gently and holds still for people who reduce motion. Mark the loading region with aria-busy."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Skeleton

## A list row

```tsx
import { Skeleton } from '@arbol-ai/ui';

<section aria-busy aria-label="Contacts" className="flex max-w-sm items-center gap-3">
  <Skeleton className="size-8 shrink-0 rounded-full" />
  <div className="flex-1 space-y-2">
    <Skeleton className="h-3.5 w-40" />
    <Skeleton className="h-3 w-24" />
  </div>
</section>
```

## A card

```tsx
import { Skeleton } from '@arbol-ai/ui';

<section aria-busy aria-label="Campaign summary" className="max-w-sm space-y-3">
  <Skeleton className="rounded-card h-32 w-full" />
  <Skeleton className="h-4 w-3/4" />
  <Skeleton className="h-4 w-1/2" />
</section>
```

## Source

The examples above are [`src/components/skeleton/skeleton.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/skeleton/skeleton.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/feedback/skeleton/index.mdx