DOM-Aware Auto Skeleton
Reads your actual component layout and generates pixel-perfect skeleton placeholders automatically.
4 Animation Styles
Pulse, shimmer, wave, and solid. Customize duration, colors, and radius with CSS variables.
SSR-Safe
Boneyard Pattern ensures zero hydration mismatches in Next.js App Router and streaming.
Zero Config
Wrap your component, set loading={true}, done. No boilerplate, no setup files required.
CLI Tool
npx skelion init to bootstrap. npx skelion generate to scaffold skeleton components instantly.
TypeScript-First
Full type safety with autocomplete-friendly props. Tree-shakable ESM + CJS exports.
Simple API, Powerful Results
UserProfile.tsx
import { Skeleton } from "skelion";
import "skelion/styles.css";
function UserProfile({ user, loading }) {
return (
<Skeleton loading={loading} animation="shimmer">
<div className="profile">
<img src={user.avatar} alt={user.name} />
<h2>{user.name}</h2>
<p>{user.bio}</p>
</div>
</Skeleton>
);
}
Ready to Get Started?
Install Skelion and add skeleton loading to your React app in under a minute.