status states
TuxSkeleton
Placeholder shapes for loading states. Use as a primitive (
Honors
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.