# Skeleton
URL: /design/components/skeleton

The loading shape of content that has a known layout.

> For AI agents: a documentation index is available at [llms.txt](/llms.txt). Use `.md` for canonical markdown pages; `.mdx` is kept as a backwards-compatible alias on supported URL paths.

\[interactive preview component SkeletonSpecimen omitted]

Code for SkeletonSpecimen preview:

```tsx
"use client";

import { useState, type ReactNode } from "react";
import { Skeleton } from "@/components/ui/skeleton";

function SkeletonSpecimen(): ReactNode {
  return (
    <div className="flex w-full max-w-72 items-center gap-3">
      <Skeleton className="size-10 rounded-full" />
      <div className="flex flex-1 flex-col gap-2">
        <Skeleton className="h-3.5 w-4/5" />
        <Skeleton className="h-3.5 w-3/5" />
      </div>
    </div>
  );
}
```

## Installation

Copy the source into `components/ui/skeleton.tsx`. Registry items that depend on it install it automatically.

- code

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

* title

  components/ui/skeleton.tsx

* copyText

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

* viewportClassName

  max-h-\[450px]

- language

  tsx

- code

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

## Usage

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

export function Example() {
  return (
    <div className="flex items-center gap-3">
      <Skeleton className="size-10 rounded-full" />
      <Skeleton className="h-4 w-40" />
    </div>
  );
}
```

## Examples

### Card

Compose skeleton blocks into the layout the data will fill; the closer the shapes, the calmer the swap.

\[interactive preview component SkeletonCardSpecimen omitted]

Code for SkeletonCardSpecimen preview:

```tsx
"use client";

import { useState, type ReactNode } from "react";
import { Skeleton } from "@/components/ui/skeleton";

function SkeletonCardSpecimen(): ReactNode {
  return (
    <div className="border-foreground/10 rounded-surface flex w-full max-w-72 flex-col gap-3 border p-4">
      <Skeleton className="h-24 w-full" />
      <Skeleton className="h-4 w-4/5" />
      <Skeleton className="h-4 w-3/5" />
      <div className="flex items-center gap-2 pt-1">
        <Skeleton className="size-6 rounded-full" />
        <Skeleton className="h-3.5 w-24" />
      </div>
    </div>
  );
}
```

## API Reference

### Skeleton

Renders a pulsing `div`; the size comes entirely from `className`.

- `className?`: `string` — Width, height, and radius of the placeholder.