# Skeleton

A placeholder for loading content.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentPreview name="skeleton-demo">
  <div className="flex flex-col w-full max-w-sm gap-6 p-6 border border-border/50">
    <div className="flex items-center space-x-4">
      <Skeleton className="h-12 w-12 rounded-full shrink-0" />

      <div className="space-y-2 w-full">
        <Skeleton className="h-4 w-3/4" />

        <Skeleton className="h-4 w-1/2" />
      </div>
    </div>

    <Skeleton className="h-40 w-full" />

    <div className="space-y-2">
      <Skeleton className="h-3 w-full" />

      <Skeleton className="h-3 w-full" />

      <Skeleton className="h-3 w-4/5" />
    </div>
  </div>
</ComponentPreview>

### List Skeletons [#list-skeletons]

<ComponentPreview name="skeleton-list">
  <div className="flex flex-col w-full max-w-md gap-4 p-4">
    {Array.from({ length: 3 }).map((_, i) => (
          <div key={i} className="flex items-center gap-4">
            <Skeleton className="h-10 w-10 shrink-0 rounded-full" />
            <div className="space-y-2 w-full">
              <Skeleton className="h-4 w-[250px]" />
              <Skeleton className="h-3 w-[200px]" />
            </div>
          </div>
        ))}
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/skeleton.json"
```

## Usage [#usage]

After you add the component with the CLI, import it from your UI folder:

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

export function MyComponent() {
  return (
    <div className="flex flex-col w-full max-w-sm gap-6 p-6 border border-border/50">
      <div className="flex items-center space-x-4">
        <Skeleton className="h-12 w-12 rounded-full shrink-0" />
        <div className="space-y-2 w-full">
          <Skeleton className="h-4 w-3/4" />
          <Skeleton className="h-4 w-1/2" />
        </div>
      </div>
      <Skeleton className="h-40 w-full" />
      <div className="space-y-2">
        <Skeleton className="h-3 w-full" />
        <Skeleton className="h-3 w-full" />
        <Skeleton className="h-3 w-4/5" />
      </div>
    </div>
  )
}
```

## API Reference [#api-reference]

The `Skeleton` component extends standard HTML `div` attributes.

| Prop        | Type     | Default | Description                                                                                                                                                         |
| ----------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` | `string` | -       | CSS classes to apply to the skeleton placeholder. Use Tailwind sizing classes (e.g., `h-4 w-[200px]`) and border radius classes (e.g., `rounded-full`) to shape it. |