Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Skeleton
description: Use a skeleton as a placeholder while content is loading.
---

```astro live props={{ name: 'skeleton' }}
---
import { Skeleton } from "@/components/ui/skeleton"
---

<div class="flex w-full max-w-sm flex-col gap-2">
  <Skeleton class="h-12 w-12 rounded-full" />
  <Skeleton class="h-4 w-full" />
  <Skeleton class="h-4 w-3/4" />
</div>
```

## Installation

```bash
npx shadcn@latest add @fulldev/skeleton
```

## Usage

```ts
import { Skeleton } from "@/components/ui/skeleton"
```

```astro
<Skeleton class="h-4 w-full" />
```

## Example

```astro live
---
import { Skeleton } from "@/components/ui/skeleton"
---

<div class="w-full max-w-sm rounded-lg border p-4">
  <div class="flex items-center gap-3">
    <Skeleton class="size-10 rounded-full" />
    <div class="flex flex-1 flex-col gap-2">
      <Skeleton class="h-4 w-32" />
      <Skeleton class="h-3 w-24" />
    </div>
  </div>
</div>
```

## Notes

- Match the approximate size of the final content to reduce layout shift.
- Use `Skeleton` for loading states, not empty states. For no-data UI, use
  [Empty](/components/empty/).

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/skeleton) for more information on props.