Use to show a placeholder while content is loading.
<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
npx shadcn@latest add https://dotui.org/r/{style-name}/skeleton.json
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.
<Skeleton>
<Button>Button</Button>
</Skeleton>
Show
Use the show prop to show/hide the skeleton.
<Skeleton>
<Button>Button</Button>
</Skeleton>
<Skeleton show={false}>
<Button>Button</Button>
</Skeleton>
Examples
Loading data from an API
Some text loaded from API.
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.
<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. |