status states

TuxSkeleton

Placeholder shapes for loading states. Use as a primitive (width / height / variant) or via a kind preset (card, list, table, article, media, stat) for a composed shape.

Honors prefers-reduced-motion automatically — the shimmer collapses to a static tint. Pass animated="pulse" for opacity-only animation in dense lists, or animated="never" to opt out entirely.

primitive

Variant + size control

Loading…
Loading…
Loading…
<tux-skeleton width="14rem" height="1rem" />
<tux-skeleton variant="circle" width="2.5rem" />
<tux-skeleton variant="text" width="22ch" />

presets

Six composed shapes

Loading…
<tux-skeleton kind="card" />
Loading…
<tux-skeleton kind="list" :count="5" />
Loading…
<tux-skeleton kind="table" :count="4" />
Loading…
<tux-skeleton kind="article" :count="6" />
Loading…
<tux-skeleton kind="stat" />

animation modes

Shimmer · pulse · never

shimmer (default)

Loading…

pulse

Loading…

never

Loading…

accessibility

Announced as a status region

Each skeleton is wrapped in role="status" with aria-live="polite" and an SR-only "Loading…" label. Override via the label prop for surface- specific copy (e.g. label="Loading conversation history…"). The decorative shapes themselves are aria-hidden.