Configuration Options

Complete reference for tuning runtime behavior.

All Options

Type, default, and intent for each config key

Option	Type	Default	Description
animation	"pulse" \| "shimmer" \| "none"	"shimmer"	Animation style for skeleton elements.
baseColor	string	var(--skeleton-base)	Base color for skeleton surfaces.
highlightColor	string	var(--skeleton-highlight)	Shimmer highlight color.
borderRadius	number	4	Corner radius for non-text blocks.
speed	number	1	Animation speed multiplier.
minTextHeight	number	12	Minimum text line block height in px.
maxDepth	number	12	Maximum analyzer traversal depth.
lastLineRatio	number	0.7	Relative width of the last line in multiline text.
iconMaxSize	number	32	Largest icon size in px before classified as image.
minImageArea	number	900	Smallest image area required for image classification.
transitionDuration	number	300	Fade transition duration in ms.

Quick Start

Create and pass a partial config

tsx

const config = {
  animation: "pulse",
  baseColor: "#e5e7eb",
  highlightColor: "#f8fafc",
  borderRadius: 8,
  speed: 1.3,
};

<AutoSkeleton loading={loading} config={config}>
  <YourContent />
</AutoSkeleton>