# Skeleton: Wrap real content

> With `loading`, the skeleton renders the real content invisibly underneath, so it takes the exact size and nothing shifts when the data arrives. When `loading` turns false, the content fades in.

Example: https://hextaui.com/docs/skeleton/examples/wrap-content
Component docs: https://hextaui.com/docs/skeleton.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/skeleton-wrap-content.json
```

This adds `components/examples/skeleton/wrap-content.tsx` with the Skeleton component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/skeleton/wrap-content.tsx"
"use client"

import * as React from "react"
import { IconUserPlus } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import { Skeleton } from "@/components/ui/skeleton"

export function SkeletonWrapContent() {
  const [loading, setLoading] = React.useState(true)

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <div className="flex items-start gap-4 rounded-xl border p-4">
        <Skeleton loading={loading} className="rounded-full">
          <img
            src="/preview/landscape.svg"
            alt=""
            className="size-12 rounded-full object-cover"
          />
        </Skeleton>
        <div className="flex min-w-0 flex-1 flex-col gap-1">
          <Skeleton loading={loading}>
            <h3 className="font-semibold">Olivia Martin</h3>
          </Skeleton>
          <Skeleton loading={loading}>
            <p className="text-sm text-muted-foreground">
              Design engineer at Acme. Writes about motion and small details.
            </p>
          </Skeleton>
        </div>
        <Skeleton loading={loading}>
          <Button size="sm" variant="outline">
            <IconUserPlus data-icon="inline-start" />
            Follow
          </Button>
        </Skeleton>
      </div>
      <div className="flex gap-2">
        <Button size="sm" onClick={() => setLoading(false)}>
          Load
        </Button>
        <Button size="sm" variant="ghost" onClick={() => setLoading(true)}>
          Reset
        </Button>
      </div>
    </div>
  )
}
```

## Props in this example

### Skeleton

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `loading` | `boolean` | – | When set, the skeleton wraps its children: true shows the placeholder, false shows the content. Leave it out for a standalone placeholder. |

## More Skeleton examples

- [Shapes](https://hextaui.com/docs/skeleton/examples/shapes.md)
- [Animations](https://hextaui.com/docs/skeleton/examples/animations.md)
- [Text](https://hextaui.com/docs/skeleton/examples/text.md)
- [Inline](https://hextaui.com/docs/skeleton/examples/inline.md)
- [Fast load](https://hextaui.com/docs/skeleton/examples/fast-load.md)
- [Many rows](https://hextaui.com/docs/skeleton/examples/many-rows.md)
- [Right to left](https://hextaui.com/docs/skeleton/examples/rtl.md)