v0.2.0 — New: GhostlySuspense, Tailwind plugin, smooth transitions

Zero-config
skeleton loaders

Wrap your component. Import the CSS. Done. No CLI, no build step, no code changes to your components.

Get StartedGitHub
your-component.tsx
// Your component stays exactly the same
import { Ghostly } from '@ghostly/react'

<Ghostly loading={isLoading} smooth>
  <ProductCard product={data} />
</Ghostly>
0

Zero Config

No CLI, no build step, no generated files. Install and use.

0

Zero Code Changes

Your components stay exactly as they are. Just wrap them.

~3KB

Tiny Bundle

CSS-first engine. Zero runtime JavaScript for skeleton rendering.

3 Animations

Shimmer, pulse, wave — all pure CSS

Dark Mode

Automatic via CSS custom properties

Accessible

ARIA, reduced motion, screen readers

Smooth Transitions

Fade-out when loading ends with smooth prop

GhostlySuspense

Auto-skeleton with React Suspense

Tailwind Plugin

ghostly-radius-*, ghostly-speed-*, ghostly: variant

Color Props

Inline color and shine customization

Line Control

data-ghostly-lines and aspect-ratio for images

GhostlySuspense
import { GhostlySuspense } from '@ghostly/react'

<GhostlySuspense
  fallback={<ProductCard />}
>
  <AsyncProductCard />
</GhostlySuspense>
Tailwind Plugin
// tailwind.config.js
import ghostly from 'ghostly/tailwind'

export default {
  plugins: [ghostly]
}

MIT Licensed — Built with care