Dynamic React Skeletons

Skeletons that match your exact UI.

Stop wasting hours creating and maintaining manual skeleton UI. react-adaptive-skeleton dynamically traverses your React tree and wraps text and nodes seamlessly, preserving layout and structural integrity.

Documentation

Interactive Demo

Try toggling the loading state. Notice how the skeleton meticulously maps to every curve, text node, and image of the cards? That's the power of precise DOM traversal.

Toggle State

Jane Doe

Senior Product Designer

Passionate about creating intuitive user experiences and bridging the gap between design and engineering.

Monthly Active Users

24,592

+14%vs last month

Engineering

5 min read

Building Resilient UI Components

Learn how to architect your React components to gracefully handle loading states, errors, and missing data without resorting to complex state management.

demo.tsx

import { createAdaptiveSkeleton } from "react-adaptive-skeleton";

// 1. Configure your skeleton style
const AdaptiveSkeleton = createAdaptiveSkeleton(
<div className="animate-pulse bg-gray-200 rounded" />,
{
	...options
});

 // 2. Wrap your complex UI
MyDashboard() {
const { data, isLoading } = useData();

return (
<AdaptiveSkeleton isLoading={isLoading}>
 
  <div className="grid gap-4">
    <ProfileCard user={isLoading? templateUserData : data.user} />
    <StatsCard stats={isLoading? templateStatsData : data.stats} />
  </div>
</AdaptiveSkeleton>
);
}

Why Adaptive Skeleton?

I built this because manually designing, coding, and updating skeleton loaders for every UI change was frustrating and honestly, not so fun. Much time was spent doing that instead of building features.

react-adaptive-skeleton was born out of the need for a solution that just works—mapping perfectly to your UI without the manual labor.

Zero Configuration

Drop it in and it works. No need to define arbitrary width/height props for hundreds of placeholder elements.

Automatic Mapping

Text nodes, images, and nested structures are automatically sized and replaced with perfectly fitting skeletons.

Granular Control

Opt-out specific elements using data-attributes or CSS selectors. You retain full control over what gets skeletonized.