Guides
Troubleshooting
Common issues and their solutions.
Skeleton doesn't appear
CSS not imported. Add to your global CSS:
@import '@ghostly-ui/core/css';Elements collapse to zero height
Empty content without min-height. Ghostly sets min-height: 1em on text elements, but if your CSS overrides it:
/* Override the minimum height */
[data-ghostly] p { min-height: 3em; }Images show broken icon
Empty src attribute. Use conditional rendering:
// ✅ Good
{product?.image ? (
<img src={product.image} alt={product.title} />
) : (
<div className="h-48 w-full" />
)}
// ❌ Bad — empty string triggers a request
<img src={product?.image ?? ''} />Component crashes with undefined data
Missing optional chaining. Use data?.property:
// ✅ Safe
<h2>{data?.title ?? ''}</h2>
// ❌ Crashes
<h2>{data.title}</h2>Animation not showing
If prefers-reduced-motion: reduce is enabled, animations are intentionally disabled. This is correct behavior.
Check: DevTools → Rendering → Emulate prefers-reduced-motion.
GhostlyList shows nothing
Missing item prop when children is empty:
// ✅ Always provide item
<GhostlyList loading={true} count={6} item={<ProductCard />}>Dark mode colors wrong
Custom theme system. Override for your system:
.my-dark-mode {
--ghostly-color: hsl(220 13% 18%);
--ghostly-shine: hsl(220 13% 25%);
}TypeScript: CSS variable error
Cast to CSSProperties:
style={{ '--ghostly-color': '...' } as React.CSSProperties}