Real-World Examples
23 hand-tuned demos showing how the primitives (Skeleton, TextSkeleton, SkeletonGroup) compose into real layouts, plus a few creative detours. Click Skeleton or Content to instantly compare. Looking for the ready-made composites instead? See /components.
Same container
Identical width, padding, and border-radius
Same dimensions
Avatar size, image ratio, button height
Same hierarchy
Every skeleton block maps to a real element
Code snippets assume Tailwind CSS for the wrapper markup (flex, gap-4, card, etc.) — the skeleton component calls themselves work with any styling setup.
Profiles & Social
4User Profile
Social Post
Notification List
Comment Thread
Content
2Blog Article
Video Card
E-commerce
3Product Card
Pricing Card
Product Detail
Dashboard & Data
2Analytics Dashboard
Data Table
Forms & Communication
3Login Form
Chat Conversation
Settings Panel
Navigation & More
4Sidebar Navigation
Music Player
Navbar
Search Results
Skeletons are just animated, themeable shapes — nothing ties them to “loading state.” A few less conventional ways to use the same primitives.
Creative
5Piano Keyboard
Skeleton bars as keys — no music, just geometry.
Audio Equalizer
Staggered pulse delays fake a dancing waveform.
Contribution Heatmap
A GitHub-style grid, driven by per-cell opacity.
QR Code Silhouette
A grid.map() and some opacity — that's the whole trick.
Constellation
AvatarSkeleton circles, absolutely positioned as a starfield.