Responsive Behavior

Use remeasureOnResize to keep skeleton geometry aligned as the container width changes.

Interactive Example

Resize the card width and compare skeleton behavior

remeasureOnResize

Loading state

Simulate API latency

Enable remeasureOnResize

When disabled, skeleton geometry does not reflow on resize

Width: 420px

Adaptive Product Card

Desktop breakpoint layout

$129.00

Code Example

Typical responsive configuration

tsx

<AutoSkeleton
  loading={loading}
  remeasureOnResize={true}
>
  <ResponsiveCard />
</AutoSkeleton>

// Apply width to the measured wrapper
<div style={{ width }}>
  <AutoSkeleton loading={loading} remeasureOnResize={true}>
    <ResponsiveCard />
  </AutoSkeleton>
</div>