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

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```astro title="src/components/examples/skeleton/skeleton-demo.astro"
---
import { Skeleton } from "@/components/ui/skeleton"
---

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

## Installation

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

## Usage

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

```astro
<Skeleton class="h-[20px] w-[100px] rounded-full" />
```

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](/astro/components/empty/).

## Avatar

```astro title="src/components/examples/skeleton/skeleton-avatar.astro"
---
import { Skeleton } from "@/components/ui/skeleton"
---

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

## Card

```astro title="src/components/examples/skeleton/skeleton-card.astro"
---
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
---

<Card class="w-full max-w-xs">
  <CardHeader>
    <Skeleton class="h-4 w-2/3" />
    <Skeleton class="h-4 w-1/2" />
  </CardHeader>
  <CardContent>
    <Skeleton class="aspect-video w-full" />
  </CardContent>
</Card>
```

## Text

```astro title="src/components/examples/skeleton/skeleton-text.astro"
---
import { Skeleton } from "@/components/ui/skeleton"
---

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

## Form

```astro title="src/components/examples/skeleton/skeleton-form.astro"
---
import { Skeleton } from "@/components/ui/skeleton"
---

<div class="flex w-full max-w-xs flex-col gap-7">
  <div class="flex flex-col gap-3">
    <Skeleton class="h-4 w-20" />
    <Skeleton class="h-8 w-full" />
  </div>
  <div class="flex flex-col gap-3">
    <Skeleton class="h-4 w-24" />
    <Skeleton class="h-8 w-full" />
  </div>
  <Skeleton class="h-8 w-24" />
</div>
```

## Table

```astro title="src/components/examples/skeleton/skeleton-table.astro"
---
import { Skeleton } from "@/components/ui/skeleton"
---

<div class="flex w-full max-w-sm flex-col gap-2">
  {Array.from({ length: 5 }).map(() => (
    <div class="flex gap-4">
      <Skeleton class="h-4 flex-1" />
      <Skeleton class="h-4 w-24" />
      <Skeleton class="h-4 w-20" />
    </div>
  ))}
</div>
```

## RTL

Set `dir="rtl"` on a parent element.

```astro title="src/components/examples/skeleton/skeleton-rtl.astro"
---
import { Skeleton } from "@/components/ui/skeleton"

const translations = {
  en: {
    dir: "ltr",
    values: {},
  },
  ar: {
    dir: "rtl",
    values: {},
  },
  he: {
    dir: "rtl",
    values: {},
  },
} as const

const { dir } = translations.ar
---

<div class="flex items-center gap-4" dir={dir}>
  <Skeleton class="h-12 w-12 rounded-full" />
  <div class="space-y-2">
    <Skeleton class="h-4 w-[250px]" />
    <Skeleton class="h-4 w-[200px]" />
  </div>
</div>
```

## API Reference

Source: [`src/components/ui/skeleton`](https://github.com/fulldotdev/ui/tree/main/src/components/ui/skeleton)

`Skeleton` renders a `div` with `data-slot="skeleton"` and passes all other
attributes through.

## Install what this page shows

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