104Get started
HextaUI

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.

"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>
  )
}

Add this example

This adds the example as components/examples/skeleton/wrap-content.tsx, together with the Skeleton component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/skeleton-wrap-content.json

To add only the component, follow the Skeleton installation.

Props in this example

The Skeleton props this example sets, from the API reference.

Skeleton

PropTypeDefault
loadingWhen set, the skeleton wraps its children: true shows the placeholder, false shows the content. Leave it out for a standalone placeholder.
boolean–

Every prop is in the Skeleton API reference.

More Skeleton examples

See them all, with keyboard support and accessibility notes, on the Skeleton page.

Related components