Custom Slots

Apply data-skeleton-slot for custom skeleton rendering on specific elements. Toggle ON passes slots and uses the custom renderer for product-thumbnail; toggle OFF passes undefined and falls back to auto-generated skeletons for the same content.

Interactive Example

Toggle loading and custom slot rendering

Slot: product-thumbnail

Loading state

Simulate a pending API state

Use custom slots

ON: use custom product-thumbnail slot renderer. OFF: slots is undefined and AutoSkeleton falls back to auto-detected skeleton nodes.

Premium Headphones

High-quality audio experience

$199$249

The underlying ProductCardWithSlot markup does not change. This toggle only changes skeleton rendering strategy.

Code Example

Define slot key and pass slots to AutoSkeleton

tsx

<div data-skeleton-slot="product-thumbnail" className="h-20 w-20" />

const customSlots = {
  "product-thumbnail": () => <div className="h-20 w-20 rounded-lg animate-pulse" />,
};

<AutoSkeleton loading={loading} slots={customSlots}>
  <ProductCard />
</AutoSkeleton>