elements
Manual UI Templates Skeleton

Skeleton

elements man ui/templates/skeleton

A placeholder shape shown while content loads, or wrapped around the content so it never moves.

Example
import { Skeleton } from "@elements/ui/skeleton";

<Skeleton width="12rem" />
<Skeleton shape="circle" width="var(--space-10)" />
<Skeleton shape="text" lines={3} />
<Skeleton loading={state.loading}>
  <h3>{user.name}</h3>
</Skeleton>

Parts

Part What it is
.skeleton The shape or the wrapper. Usable without the template: <div class="skeleton" data-loading>``</div>.
.skeleton-line One bar of a text skeleton.

Attributes

Attribute Type Default Description
shape "block" | "text" | "circle" "block" block is a rounded rect, circle is round, text is a stack of bars.
loading boolean true Shows the pulse; false reveals the wrapped content in the same box.
width Responsive "" Any CSS length, or one per breakpoint: { initial, sm, md, lg, xl, 2xl }.
height Responsive "" Any CSS length, or one per breakpoint. An unsized empty block is one line high.
minWidth, maxWidth Responsive "" Bounds for a fluid width.
minHeight, maxHeight Responsive "" Bounds for the height.
m, mx, my, mt, mr, mb, ml Responsive "" Margins: a space step 0 to 9 (or -1 to -9) or a CSS length, or one per breakpoint. A side beats its axis, which beats m.
lines number 3 Bars in a text skeleton; the last one is shorter.
inline boolean false inline-block, for a placeholder inside a line of text.
class string "" Extra classes; size and shape it from your CSS.
attrs Record<string, string | number | boolean | undefined> {} Any other attributes: id, data-*.

Slots

Slot Content
default The real content. Laid out but hidden while loading, so the skeleton is its exact size.

Data attributes

Attribute Values On
data-shape "block" | "text" | "circle" root
data-loading present while loading root
data-responsive the per breakpoint values set, e.g. "width-initial width-md" root

Accessibility

  • aria-busy="true" while loading, and aria-hidden and inert, so nothing inside is read or focused; text bars are aria-hidden.
  • Wrapped content is visibility: hidden and bare text transparent while loading, so neither is read nor focusable until it arrives.
  • Set aria-busy on the region around a group of bare shapes.
  • The pulse stops under prefers-reduced-motion.

See also