Configuration

All configuration is optional. Pass a partial SkeletonConfig object to override defaults.

tsx

<AutoSkeleton loading={loading} config={{ animation: 'pulse', baseColor: '#f0f0f0' }}>  <MyComponent /></AutoSkeleton>

animation

Type: 'pulse' | 'shimmer' | 'none' Default: 'pulse'

Controls the animation applied to skeleton elements.

tsx

// Pulsing opacity animation (default)config={{ animation: 'pulse' }}// No animation — static skeleton blocksconfig={{ animation: 'none' }}

Value	Behavior
`pulse`	Skeleton blocks pulse between full and half opacity (2s cycle)
`shimmer`	Reserved for future use
`none`	Static skeleton blocks, no animation

baseColor

Type: string Default: '#e0e0e0'

Background color of all skeleton blocks. Accepts any valid CSS color.

tsx

// Light gray (default)config={{ baseColor: '#e0e0e0' }}// Dark mode skeletonconfig={{ baseColor: '#374151' }}// Subtle blue tintconfig={{ baseColor: '#e2e8f0' }}

highlightColor

Type: string Default: '#f5f5f5'

Highlight color used in animations. Reserved for shimmer animation.

tsx

config={{ highlightColor: '#f5f5f5' }}

borderRadius

Type: number Default: 4

Border radius in pixels applied to skeleton blocks.

tsx

// Rounded cornersconfig={{ borderRadius: 8 }}// Sharp cornersconfig={{ borderRadius: 0 }}// Pill shape (for small elements)config={{ borderRadius: 100 }}

minTextHeight

Type: number Default: 12

Minimum height in pixels for an element to be classified as text. Elements shorter than this are less likely to be recognized as text content.

tsx

// Default — recognizes standard body textconfig={{ minTextHeight: 12 }}// Increase for designs with large text onlyconfig={{ minTextHeight: 20 }}

minImageSize

Type: number Default: 32

Minimum dimension in pixels for an element to score as an image. Both width and height must exceed this for image classification to receive area-based points.

tsx

// Defaultconfig={{ minImageSize: 32 }}// Recognize smaller images (thumbnails, icons-as-images)config={{ minImageSize: 16 }}

iconMaxSize

Type: number Default: 48

Maximum dimension in pixels for icon detection. Elements smaller than this that are also roughly square will score higher for the icon role.

tsx

// Defaultconfig={{ iconMaxSize: 48 }}// Allow larger iconsconfig={{ iconMaxSize: 64 }}

maxDepth

Type: number Default: 10

Maximum depth for DOM tree traversal. Increase for deeply nested component trees, decrease for performance.

tsx

// Default — handles most layoutsconfig={{ maxDepth: 10 }}// Deep component treesconfig={{ maxDepth: 20 }}// Shallow scan for simple layoutsconfig={{ maxDepth: 5 }}

ignoreSelectors

Type: string[] Default: ['.no-skeleton', '[data-skeleton-ignore]']

CSS selectors for elements to skip during skeleton generation. Matched elements are excluded entirely — they won't appear in the skeleton.

tsx

// Add a custom ignore selectorconfig={{  ignoreSelectors: [    '.no-skeleton',    '[data-skeleton-ignore]',    '.toolbar',    '#persistent-banner',  ]}}

**Note:** This is different from `data-no-skeleton` which keeps elements **visible** during loading. `ignoreSelectors` removes elements from the skeleton entirely. See [Opt-Out](./05-opt-out.md) for the full comparison.

Full Example

tsx

<AutoSkeleton  loading={loading}  config={{    animation: 'pulse',    baseColor: '#f3f4f6',    highlightColor: '#e5e7eb',    borderRadius: 6,    minTextHeight: 14,    minImageSize: 40,    iconMaxSize: 32,    maxDepth: 12,    ignoreSelectors: ['.no-skeleton', '[data-skeleton-ignore]', '.always-visible'],  }}>  <Dashboard /></AutoSkeleton>

04-configuration