🪄 Zero Config · React & React Native

Auto-generate
Skeleton Loaders

Wrap any React or React Native component with <AutoSkeleton isLoading={true}> and get perfectly-matched shimmer placeholders — automatically.

📦 View on npm
$ npm install auto-skeleton-react-and-native ⎘
⭐ Star on GitHub
~4 kB Gzipped bundle
0 Dependencies
2 Platforms
MIT License
Skeleton Preview — Live Animation
✦ Features

Everything you need,
nothing you don't

AutoSkeleton does the heavy lifting so you can focus on building great products.

⚡
Zero Configuration
Drop AutoSkeleton around any component. It introspects the layout tree and renders perfectly matched skeletons instantly — no manual setup.
🎨
Wave & Pulse Animations
Choose from silky wave shimmer, gentle pulse, or static — all controlled via a single prop. Customize speed, colors, and border radius.
🌐
React & React Native
One API, two platforms. Import from auto-skeleton-react-and-native for web and auto-skeleton-react-and-native/native for mobile — same props, same behaviour.
🎯
Layout-Preserving
The skeleton mirrors flex/grid layouts, padding, gap, and sizing from your real components so the transition feels seamless.
🏷️
Smart Element Detection
Automatically identifies text nodes, images, inputs, buttons, cards, and custom components to render the right skeleton shape.
🌙
Light · Dark · Auto
System-aware theming out of the box. Override with custom base and highlight colors to match your exact brand palette.
🔌
Context API Support
Wrap your app with SkeletonProvider to set global defaults. Individual AutoSkeleton instances can still override locally.
📦
Tiny Bundle
Under 4 kB gzipped with zero runtime dependencies beyond React. Tree-shakeable ESM + CommonJS dual output.
♿
Accessible
Skeleton containers emit role="status" and aria-busy="true" so screen readers announce loading state correctly.
⚙ How It Works

Up and running in
3 steps

From install to production-ready skeletons in under a minute.

01
npm install auto-skeleton-react-and-native
Add the package to your project.
02
import { AutoSkeleton } from 'auto-skeleton-react-and-native';
Import the component (or /native for React Native).
03
<AutoSkeleton isLoading={isLoading}> <YourComponent /> </AutoSkeleton>
Wrap your component. Done.
📄 API Reference

Component Props

All props are optional except isLoading and children.

Prop Type Default Description
isLoading boolean — Controls whether to show skeleton or real content.
children ReactNode — The actual component(s) to render when loaded.
animation 'wave' | 'pulse' | 'none' 'wave' Animation style for the skeleton shimmer effect.
theme 'light' | 'dark' | 'auto' 'light' Color scheme. 'auto' follows the OS preference.
borderRadius number | string 6 Border radius applied to block skeleton elements.
speed number 1.6 Animation cycle duration in seconds.
baseColor string '#e0e0e0' The primary (darker) background color of the skeleton.
highlightColor string '#f5f5f5' The highlight (lighter) color used in the shimmer sweep.
delay number 0 Milliseconds to wait before showing skeleton (avoids flash on fast loads).
skipComponents string[] [] Component display names to exclude from skeleton rendering.
debug boolean false Shows dashed red outlines around detected skeleton elements.
❓ FAQ

Frequently Asked Questions

Can't find your answer? Open an issue on GitHub.

Yes. AutoSkeleton analyses the React element tree statically — it doesn't require hooks in your components, so class components are fully supported.
Absolutely. AutoSkeleton is framework-agnostic. It works with Next.js (App Router & Pages Router), Remix, Expo, and any other React-based framework.
Pass the component display names to the skipComponents prop: <AutoSkeleton skipComponents={["MyIcon", "Badge"]} …>.
Yes. Wrap your app in <SkeletonProvider animation="wave" theme="dark"> and all AutoSkeleton instances will inherit those defaults.
The web build is ~3.8 kB gzipped, the native build is ~4.2 kB. Zero runtime dependencies beyond React.
Yes. Use the delay prop (in milliseconds). The skeleton only appears if loading takes longer than the specified delay.
Yes! The GitHub repository contains both a React (Web) demo app in the example/ directory and a React Native (Expo) demo app in the native-example/ directory. Clone the repo and run npm start in either folder.

Start shipping
better UX today

It takes one command to install and one prop to activate. No excuses.

📦 npm install auto-skeleton-react-and-native View Source →