Pattern Library
Explore interactive examples of react-adaptive-skeleton in action. View the source code to see how to implement explicit targets, polymporphic containers, and scroll boundaries.
User Profile Card
Demonstrates explicit 'data-skeleton' targeting for an image block, and text freezing with 'data-no-skeleton-text' for the user's role.
Jane Doe
Senior Product Designer
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
Product Grid
A 'Macro' scale pattern. Instead of wrapping individual cards, one AdaptiveSkeleton wraps the entire grid view for superior performance. Suitable for simple structured cards that does not have complex node trees.
Wireless Headphones
$129.99
Mechanical Keyboard
$149.50
Ergonomic Mouse
$79.00
4K Monitor
$349.00
Laptop Stand
$45.99
USB-C Hub
$59.90
Table Rows
Uses the polymorphic 'as' prop to render the scanner as a <tbody> to ensure HTML validity inside table layouts.
| Name | Status | Role |
|---|---|---|
| Alice M. Smith | Active | Administrator |
| Robert B. Johnson | Offline | Content Editor |
| Charles C. Brown | Active | Staff Viewer |
| Diana D. Prince | Active | Administrator |
Scrolling Container
Shows the Golden Rule of scrolling: place the AdaptiveSkeleton INSIDE the overflow element, so skeletons scroll smoothly with the page.
Recent System Notification
10m agoThis is a placeholder description that is long enough to span multiple lines in the notification feed to match the loaded state.
Recent System Notification
10m agoThis is a placeholder description that is long enough to span multiple lines in the notification feed to match the loaded state.
Recent System Notification
10m agoThis is a placeholder description that is long enough to span multiple lines in the notification feed to match the loaded state.
Recent System Notification
10m agoThis is a placeholder description that is long enough to span multiple lines in the notification feed to match the loaded state.
Recent System Notification
10m agoThis is a placeholder description that is long enough to span multiple lines in the notification feed to match the loaded state.
Recent System Notification
10m agoThis is a placeholder description that is long enough to span multiple lines in the notification feed to match the loaded state.
Recent System Notification
10m agoThis is a placeholder description that is long enough to span multiple lines in the notification feed to match the loaded state.
Recent System Notification
10m agoThis is a placeholder description that is long enough to span multiple lines in the notification feed to match the loaded state.
Shimmer / Shine Effect
Uses the overlay.children option to render a single animated gradient inside the overlay — one element sweeps across all skeleton rects simultaneously, with no per-rect duplication.
Jane Doe
Senior Product Designer
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.