Introduction

Ghostly transforms your existing components into skeleton loaders using pure CSS. No CLI, no build step, no code changes.

import { Ghostly } from '@ghostly/react'
import 'ghostly/css'

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

Your component is the skeleton. Ghostly uses CSS to hide text and images, replacing them with animated placeholder blocks — preserving the exact same layout.

Why Ghostly?

Most skeleton libraries require you to rewrite your components, run CLI tools, or maintain generated files. Ghostly doesn't.

Quick Start

Features

• Zero config — Install, import CSS, wrap. No CLI, no build step, no config files
• Zero code changes — Your components stay exactly as they are
• CSS-first — All skeleton logic is pure CSS. Zero JavaScript overhead at runtime
• GhostlySuspense — Automatic skeleton with React Suspense. No loading state needed
• Smooth transitions — Fade-out when loading ends with the smooth prop
• Color props — Customize colors per-instance with color and shine props
• Line control — data-ghostly-lines for text, data-ghostly-ratio for images
• Tailwind plugin — Utility classes: ghostly-radius-*, ghostly-speed-*, ghostly: variant
• Progressive — Works with CSR, SSR, RSC, and Suspense
• Accessible — ARIA attributes, reduced motion, screen reader friendly
• Tiny — ~2KB CSS + ~1KB React (gzipped). Zero runtime dependencies in core

Packages