# Skeleton

Use to show a placeholder while content is loading.

## When to use

* Hold the place of content that is loading, matching its final size to avoid layout shift.
* Compose several skeletons to sketch a card, an avatar with text, or a list.

## How it works

`Skeleton` is a `<div>` with a pulsing muted background in both libraries. Its size and shape come from the classes you pass (`h-4 w-[250px]`, `rounded-full`).

## Example

### Base UI

```tsx
'use client'

import { Skeleton } from "@/shadcn/base/ui/skeleton"

export default function SkeletonDemo() {
  return (
    <div className="flex items-center gap-4">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  )
}
```

```tsx [components/ui/skeleton.tsx]
import { cn } from "cn"

function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="skeleton"
      className={cn("animate-pulse rounded-md bg-muted", className)}
      {...props}
    />
  )
}

export { Skeleton }
```

### Radix

```tsx
'use client'

import { Skeleton } from "@/shadcn/radix/ui/skeleton"

export default function SkeletonDemo() {
  return (
    <div className="flex items-center gap-4">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  )
}
```

```tsx [components/ui/skeleton.tsx]
import { cn } from "cn"

function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="skeleton"
      className={cn("animate-pulse rounded-md bg-muted", className)}
      {...props}
    />
  )
}

export { Skeleton }
```

## Installation

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

## Reference

Official page: https://ui.shadcn.com/docs/components/skeleton