Beautiful loading states for React.
26 TypeScript-first skeleton components that mirror your real UI layout. Zero configuration. Fully customizable. Dark mode built in.
26
Components
100%
TypeScript
React 18+
Compatible
0
Dependencies
Why AutoSkeleton
Every feature
earns its place.
Built for developer experience without sacrificing flexibility, performance, or accessibility.
Zero Configuration
Install and use immediately. No config files, no providers required to get started.
TypeScript First
Fully typed components with intelligent autocomplete and strict type checking out of the box.
Fully Customizable
Global theming via SkeletonProvider. Override animation, colors, and radius per instance.
Dark Mode Ready
Built-in dark mode support with sensible defaults that match your design system.
26 Components
From atomic primitives to full composites — every UI loading pattern you need is covered.
Tree-Shakable
Import only what you use. Your bundler eliminates the rest. Zero unused bytes shipped.
Quick Start
Four steps. That's it.
Install the package, import the CSS once in your root layout, and start replacing loading spinners with beautiful skeletons.
- 1
Install the package via npm, yarn, or pnpm
Terminal - 2
Import the stylesheet once in your root layout
layout.tsx - 3
Replace loading states with skeleton components
any component - 4
Optionally configure SkeletonProvider for global theming
Optional
$ npm install @gyojiro/autoskeleton-reactimport { TextSkeleton, AvatarSkeleton } from '@gyojiro/autoskeleton-react';import '@gyojiro/autoskeleton-react/style.css';function UserCard({ loading, user }) { return ( <div className="card"> {loading ? <AvatarSkeleton size={48} /> : <img src={user.avatar} alt={user.name} />} {loading ? <TextSkeleton lines={2} lastLineWidth="60%" /> : <p>{user.name}</p>} </div> );}
Two Ways to Build
Ship fast. Or match pixel-for-pixel.
Every real page is a little different from the demo. AutoSkeleton doesn't make you choose between convenience and control — reach for whichever your design actually needs.
Drop in a composite
19 pre-built composites — ArticleSkeleton, DashboardSkeleton, ChatMessageSkeleton, and more — cover almost every common layout. Import one, pass a few props, ship it. No custom styling required.
Freestyle with primitives
Got a category badge, a tags row, an icon no composite anticipated? Compose Skeleton, TextSkeleton, and SkeletonGroup by hand until every shape lines up with your real content.
Components
26 ready-to-use components.
From atomic Skeleton primitives to complex composites — every pattern covered.
Start building beautiful
loading states today.
Join developers who replaced loading spinners with skeleton UIs that feel native to their application.