# Skeleton

A placeholder shown while content loads.

## Installation

```bash
npx shadcn@latest add https://landorui.landorestate.com/r/skeleton.json
```

[Registry JSON](https://landorui.landorestate.com/r/skeleton.json)

## Preview

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

export function Preview() {
  return (
    <div className="flex items-center gap-3">
      <Skeleton className="size-10 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-32" />
        <Skeleton className="h-4 w-24" />
      </div>
    </div>
  );
}
```


## Source

### ui/skeleton.tsx

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

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

export { Skeleton };
```



## Usage

A placeholder shown while content loads.

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