Components

The Skeletonizer host and the nine manual primitives.

Components

All components are auto-imported.

Rendered output is SVG. Every skeleton — automatic or manual — paints as a single <svg> overlay of <rect> and <circle> shapes, not a tree of <div class="skeleton-*"> elements. The real content stays in the DOM (hidden with visibility: hidden) so the layout is preserved; the <svg> sits absolutely positioned on top, its viewBox locked to the host's bounding box.

Every component in this page honours the same dimension-preservation rules as the automatic engine: width/height/radius props are drawn exactly as given (never randomized or rounded away), and <SkeletonImage> never distorts a configured aspect-ratio. The one difference is what there is to measure — a manual primitive like <SkeletonText :lines="3" /> has no live text to read a real per-line width from (it renders instead of its default slot while loading), so lastLineWidth stays an explicit, deterministic prop rather than a measurement. The automatic engine, which scans real rendered text, always prefers the measured per-line width when one is available.

`<Skeletonizer>`

The engine host. Wrap any subtree; everything inside is skeletonized automatically when active.

Prop	Type	Default	Description
`enabled`	`boolean`	(global)	Scope override for the global enabled flag.
`animation`	`string`	(global)	Animation preset for this scope.
`shimmer`	`boolean`	(global)	Whether the animation runs.
`autoScan`	`boolean`	(global)	Run the DOM-scan engine.
`theme`	`object`	–	Scoped theme token overrides.
`tag`	`string`	`'div'`	Wrapper tag (uses `display: contents`).

Exposes scan() and restore() via template ref.

Manual primitives

Component	Key props
`<SkeletonBlock>`	`width`, `height`, `radius`, `circle`
`<SkeletonText>`	`lines`, `lineHeight`, `gap`, `lastLineWidth`
`<SkeletonAvatar>`	`size`, `shape` (`circle`/`square`), `radius`
`<SkeletonImage>`	`width`, `height`, `aspectRatio`, `radius`
`<SkeletonButton>`	`width`, `height`, `radius`, `block`
`<SkeletonCard>`	`media`, `avatar`, `footer`, `lines`
`<SkeletonContainer>`	`layout` (`flex`/`grid`), `direction`, `columns`, `gap`
`<SkeletonList>`	`items`, `avatar`, `lines`, `gap`
`<SkeletonTable>`	`rows`, `columns`, `header`, `gap`

Every primitive also accepts animation and shimmer overrides and picks up the global theme.

<template>
  <SkeletonText :lines="4" last-line-width="40%" />
  <SkeletonAvatar :size="64" />
  <SkeletonCard media avatar footer :lines="3" />
</template>

Each primitive renders to inline SVG. For example, <SkeletonAvatar :size="64" /> produces roughly:

<svg role="img" aria-label="Loading" width="64" height="64" viewBox="0 0 64 64">
  <defs>
    <linearGradient id="sk-shimmer-1" gradientUnits="userSpaceOnUse">
      <!-- shared shimmer gradient + <animateTransform> -->
    </linearGradient>
  </defs>
  <circle cx="32" cy="32" r="32" fill="url(#sk-shimmer-1)" />
</svg>

A <SkeletonText :lines="4" /> emits one <rect> per line inside the same <svg>, sharing the gradient. Try them all live in the Showcase.