DEV Community

Joodi
Joodi

Posted on

I Built a Tiny Skeleton Loader for React

#react #javascript #npm #frontend

Every time I started a new React or Next.js project, I found myself writing the same skeleton/shimmer loading component from scratch. Copy-paste from old projects, adjust the CSS, fix the types… again and again.

So I packaged it once and published it.

Meet skeletonix β€” a plug-and-play skeleton loader for React & Next.js.

What it does

  • Smooth shimmer animation, no setup
  • Shortcut props for common patterns: text, circle, block
  • Full TypeScript support
  • Customizable colors and animation speed
  • Dark mode ready via CSS variables
  • ~3KB bundle, zero external dependencies
  • Styles are auto-injected β€” no CSS import needed

Install
npm i skeletonix

I didn’t want another heavy UI library just for skeleton loaders. I wanted something:

  • Under 5KB
  • Zero config
  • Type-safe
  • That works in both React and Next.js without extra setup Now it exists.

Links
πŸ“¦ npm: https://www.npmjs.com/package/skeletonix
πŸ’» GitHub: https://github.com/MiladJoodi/Skeletonix

If it saves you 10 minutes on your next project, give it a ⭐ on GitHub.

Top comments (0)