Skeleton

Use to show a placeholder while content is loading.

card.tsx

<Skeleton className="h-44 w-64" />
<div>
  <Skeleton className="size-10 rounded-full" />
  <div>
    <Skeleton className="h-4 w-44" />
    <Skeleton className="h-4 w-36" />
  </div>
</div>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/skeleton

Usage

Use the Skeleton component to show a placeholder while content is loading.

Options

Children

If you do not pass a fixed size, skeleton will take the size of the children.

children.tsx

<Skeleton>
  <Button>Button</Button>
</Skeleton>

Show

Use the show prop to show/hide the skeleton.

show.tsx

<Skeleton>
  <Button>Button</Button>
</Skeleton>
<Skeleton show={false}>
  <Button>Button</Button>
</Skeleton>

Examples

Loading data from an API

Some text loaded from API.

api-simulation.tsx

const [status, setStatus] = React.useState<"idle" | "loading" | "error" | "success">("idle");
const apiCall = () => {
  {/* Simulate API call */}
};

return (
  <div>
    <Button isLoading={status === "loading"} onPress={apiCall}>
      Simulate API Call
    </Button>
    <Skeleton show={status === "loading"}>
      <p>Some text loaded from API.</p>
    </Skeleton>
  </div>
);

Wrapping children with fixed size

If you do not pass a fixed size, it will be calculated automatically.

fixed-size-children.tsx

<Skeleton className="size-20"><Button>Button</Button> </Skeleton>

API Reference

Skeleton accepts all HTML div element props and the following:

Prop	Type	Default	Description
`show`	`boolean`	`true`	Weather the visual style should be filled.

Last updated on 9/15/2025

Separator Slider

On this page

Installation Usage Options Children Show Examples Loading data from an API Wrapping children with fixed size API Reference