Skeleton
New
A loading placeholder component using DaisyUI's .skeleton class.
Use it to represent content that is still loading, reducing perceived wait times and preventing
layout shifts.
API Reference
| Attribute | Description | Type | Default |
|---|---|---|---|
width
|
Tailwind width token for the skeleton block | string |
full
|
height
|
Tailwind height token for the skeleton block | string |
4
|
shape
|
Shape modifier — circle adds rounded-full, rounded adds rounded-xl
|
string |
"" (rectangle)
|
width
full
64
32
20
16
12
8
height
4
6
8
12
16
20
24
shape
circle
rounded
Accessibility
Loading state: wrap skeleton groups in a container with
aria-busy="true" and aria-label="Loading…"
so screen readers announce the loading state correctly. Remove the attribute once content is ready.
No slot: skeleton elements carry no content — they are purely visual placeholders and should be hidden from the accessibility tree when real content is available.
Examples
Usage
<c-skeleton width="64" height="4" />
Text Lines
<c-skeleton height="4" />
<c-skeleton height="4" width="32" />
<c-skeleton height="4" width="20" />Shapes
<c-skeleton width="16" height="16" shape="circle" />
<c-skeleton width="16" height="16" shape="rounded" />
<c-skeleton width="16" height="16" />Card Skeleton Pattern
<div class="card bg-base-100 w-72 shadow" aria-busy="true" aria-label="Loading">
<div class="card-body gap-4">
<div class="flex items-center gap-3">
<c-skeleton width="12" height="12" shape="circle" />
<div class="flex flex-col gap-2 flex-1">
<c-skeleton height="4" width="32" />
<c-skeleton height="4" width="20" />
</div>
</div>
<c-skeleton height="24" />
<c-skeleton height="4" />
<c-skeleton height="4" width="32" />
</div>
</div>