Your component
is the skeleton.
Zero-config skeleton loaders for React. Wrap your component, import the CSS. Done.
How it works
Three lines. That's it.
No CLI tools, no config files, no generated code. Your components stay exactly as they are.
Install
npm i @ghostly-ui/core
@ghostly-ui/reactImport CSS
@import '@ghostly-ui/core/css';Wrap
<Ghostly loading={isLoading}>
<YourComponent />
</Ghostly>Comparison
Stop rewriting components.
Other libraries make you build separate skeleton components. Ghostly wraps what you already have.
// Rewrite your component as skeleton
function ProductCardSkeleton() {
return (
<div className="card">
<Skeleton height={192} />
<div className="p-4">
<Skeleton width={60} height={16} />
<Skeleton height={20} />
<Skeleton width={80} height={24} />
<Skeleton height={40} radius={8} />
</div>
</div>
)
}
// Maintain TWO components forever
{isLoading
? <ProductCardSkeleton />
: <ProductCard product={data} />
}19 linesDuplicate maintenance forever
// Your component stays the same
// Zero skeleton code to write
<Ghostly loading={isLoading}>
<ProductCard product={data} />
</Ghostly>
// That's it. CSS handles everything.3 linesZero maintenance, zero duplication
Interactive
Try it right now.
Switch animations, trigger loading states. These are real components.
Features
Everything you need. Nothing you don't.
Zero Config
No CLI, no build step, no generated files. Install, import, wrap.
Tiny Bundle
CSS-first engine. Zero runtime JS. Tree-shakeable. Instant.
React Suspense
GhostlySuspense auto-wraps Suspense boundaries. Zero state management.
Dark Mode
Auto-detects via .dark, data-theme, or system preference.
Accessible
ARIA attributes, reduced motion, screen reader friendly.
Tailwind Plugin
Utility classes for radius, speed, and color. Plus ghostly: variant.
Smooth Transitions
Graceful fade-out when loading ends. No jarring pops.
Color Props
Per-instance color and shine. No CSS overrides needed.
CLI Tool
ghostly init, add loading, doctor. Auto-generate loading.tsx.
MCP Server
AI assistants get real docs. Claude, Cursor, Copilot.
Integrations
Works with everything.
TanStack Query, SWR, Suspense, Server Components, Next.js — just wrap and go.
const { data, isLoading } = useQuery({
queryKey: ['user'],
queryFn: fetchUser,
})
<Ghostly loading={isLoading} smooth>
<UserProfile user={data} />
</Ghostly>import { GhostlySuspense }
from '@ghostly-ui/react'
<GhostlySuspense
fallback={<ProductCard />}
smooth
>
<AsyncProductCard id={123} />
</GhostlySuspense>Start loading
beautifully.
~3KB total. Zero runtime JS. Ready in 30 seconds.
MIT Licensed — Built by Adan Serrano