Skeleton
Enhanced skeleton loading component with smooth animations and smart content replacement. Create beautiful loading states that match your content structure.
Pro features
What the Pro version adds to this component.
Theme-Integrated Primitive
MoonUISkeletonPro is a forwardRef div scoped with moonui-theme that inherits your bg-muted token and is hidden from screen readers by default
Single-Dependency Workflow
Pro-only projects get a placeholder without adding @moontra/moonui — the packages are independent and can also be used together
Documented Composition Recipes
Copy-paste layouts below (article, elevated card, responsive grid) are built from the primitive plus Tailwind utilities — no extra props required
Progress-Paired Loading Cards
A recipe for combining the placeholder with a progress bar and status badge for long-running fetches
Sequenced Reveal Recipe
Staggered fade-in pattern for feeds and long lists, driven purely by animation-delay
Switchable State Recipe
Tab-driven swapping between text, image and card skeleton layouts
Installation
Install via CLI
npx @moontra/moonui-cli add skeletonUsage
Basic Usage
Pro Usage
Examples
Basic Skeleton
Simple text skeleton loading
Variants
The variant prop maps the placeholder to a theme token — no hardcoded colors
Shapes and Sizes
shape controls corner rounding, size scales the whole placeholder — prefer these over ad-hoc classNames
Card Skeleton
Skeleton for card components
Profile Skeleton
User profile skeleton — the avatar placeholder uses shape="circle"
Data Loading
Interactive loading example with real data
Feed Skeleton
Social media feed skeleton
Table Skeleton
Data table skeleton loading
Wave (Shimmer) Animation
Built-in shimmer sweep via the animation prop — no extra setup
Smart Content Replacement
Set isLoaded to swap the skeleton for real content with a fade-in
Skeleton Helpers
SkeletonText, SkeletonAvatar and SkeletonCard for common layouts
Shimmer Overlay
Gradient shimmer sweep layered over the pro skeleton primitive
Gradient Pulse
Gradient-tinted placeholders using the pro skeleton's built-in pulse
Sequenced List Loading
Staggered fade-in reveal for feed and list rows
Article Loading Layout
Skeleton composition matched to an article card structure
Elevated Loading Card
Depth and glow built purely from CSS shadow and blur utilities
Progress Indicator Layout
Skeleton card paired with a manual progress bar and status badge
Switchable Skeleton States
Different skeleton layouts toggled with tabs
Responsive Skeleton Grid
Breakpoint-aware card grid built from the pro skeleton primitive