---
title: Skeleton
description: Subtle placeholders for content that is still loading.
group: Components
order: 61
---

Subtle placeholders for profiles, cards, forms, tables, and text that is still loading.

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

export function Example() {
  return (
    <div className="flex w-full max-w-sm items-start gap-3">
      <Skeleton className="size-10 shrink-0 rounded-full" />
      <div className="grid flex-1 gap-2 pt-0.5">
        <Skeleton className="h-3.5 w-36" />
        <Skeleton className="h-3 w-full" />
        <Skeleton className="h-3 w-4/5" />
      </div>
    </div>
  )
}
```

## Installation

```bash
npx @arctis-sh/@arctis-sh/ui@latest add skeleton
```

Add the `arctis-skeleton` styles to your global CSS for the soft pulse and fill.

## Usage

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

```tsx
<Skeleton className="h-4 w-[100px]" />
```

## Avatar

Round placeholders at a few sizes.

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

export function Example() {
  return (
    <div className="flex items-center gap-3">
      <Skeleton className="size-8 rounded-full" />
      <Skeleton className="size-10 rounded-full" />
      <Skeleton className="size-12 rounded-full" />
      <Skeleton className="size-14 rounded-full" />
    </div>
  )
}
```

## Card

Use a borderless `Card` with skeletons for the title, description, and body.

```tsx
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

export function Example() {
  return (
    <Card className="w-full max-w-sm border-0">
      <CardHeader>
        <CardTitle>
          <Skeleton className="h-4 w-32" />
        </CardTitle>
        <CardDescription>
          <Skeleton className="mt-1 h-3 w-48" />
        </CardDescription>
      </CardHeader>
      <CardContent className="grid gap-2">
        <Skeleton className="h-3 w-full" />
        <Skeleton className="h-3 w-5/6" />
        <Skeleton className="h-3 w-2/3" />
      </CardContent>
    </Card>
  )
}
```

## Text

A heading placeholder and body lines for an article or documentation page.

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

export function Example() {
  return (
    <div className="grid w-full max-w-sm gap-3">
      <Skeleton className="h-5 w-40" />
      <div className="grid gap-2">
        <Skeleton className="h-3 w-full" />
        <Skeleton className="h-3 w-full" />
        <Skeleton className="h-3 w-[92%]" />
        <Skeleton className="h-3 w-[70%]" />
      </div>
    </div>
  )
}
```

## Form

Labels, fields, and actions while a form mounts.

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

export function Example() {
  return (
    <div className="grid w-full max-w-sm gap-5">
      <div className="grid gap-2">
        <Skeleton className="h-3 w-16" />
        <Skeleton className="h-9 w-full rounded-md" />
      </div>
      <div className="grid gap-2">
        <Skeleton className="h-3 w-20" />
        <Skeleton className="h-16 w-full rounded-md" />
      </div>
      <div className="flex justify-end gap-2">
        <Skeleton className="h-9 w-20 rounded-md" />
        <Skeleton className="h-9 w-24 rounded-md" />
      </div>
    </div>
  )
}
```

## Table

A regular `Table` with real headers and skeletons only for the cell values.

```tsx
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Skeleton } from "@/components/ui/skeleton"

export function Example() {
  return (
    <div className="w-full">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead className="w-[100px]">Invoice</TableHead>
            <TableHead>Status</TableHead>
            <TableHead>Method</TableHead>
            <TableHead className="text-right">Amount</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {Array.from({ length: 4 }).map((_, index) => (
            <TableRow key={index}>
              <TableCell>
                <Skeleton className="h-3.5 w-14" />
              </TableCell>
              <TableCell>
                <Skeleton className="h-3.5 w-16" />
              </TableCell>
              <TableCell>
                <Skeleton className="h-3.5 w-24" />
              </TableCell>
              <TableCell className="text-right">
                <Skeleton className="ml-auto h-3.5 w-12" />
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}
```

## API Reference

### Skeleton

| Prop | Type | Default |
| --- | --- | --- |
| className | string | — |

Also accepts the other native `div` attributes. Size and shape come from utility classes (`h-*`, `w-*`, `rounded-full`, and so on).

```tsx
<Skeleton className="h-4 w-full" />
```

## Source

```tsx
import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";

export function Skeleton({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="skeleton"
      className={cn("arctis-skeleton rounded-md", className)}
      {...props}
    />
  );
}
```