Classic Skeleton
Comprehensive skeleton loading components collection with shimmer animations. Includes blocks, text, avatars, cards, list items, buttons, inputs, and loading overlays. High-performance shimmer effects with framer-motion.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| theme | "dark" | "light" | "dark" | Switches the entire color palette. "dark" uses neutral-950 backgrounds; "light" uses neutral-50 backgrounds. |
| shimmer | boolean | true | Toggles the shimmer animation globally across all skeleton pieces in the demo. |
When to Use
Essential for all data-driven Next.js applications and SaaS dashboards. Use these React skeleton loaders to reduce perceived latency by showing content placeholders while your actual data is being fetched from an API.
Best Practices
Follow React best practices by matching the skeleton shapes as closely as possible to your final UI layout. Maintain scalable component architecture by creating a global `Skeleton` utility that can be used across your entire design system. Optimize for performance by using efficient shimmer animations that don't block the main thread.
Why This Component Matters
Managing loading states is a critical part of modern frontend development. These production-ready skeleton components provide a polished, high-performance way to bridge the gap between request and response, improving user retention and adding semantic authority to your real-world application architecture.
FAQ
QDo these support different shapes?
Yes, the collection includes specialized skeletons for avatars (circles), headers (lines), content blocks (rectangles), and cards.
QIs the shimmer animation customizable?
Absolutely! The shimmer prop toggles animation globally, and the theme prop switches between dark and light palettes. For deeper customization, fork the component and adjust the token objects.
QHow do I use them with async data?
Simply render the skeleton while your `isLoading` state is true, and then swap it for your actual component once the data arrives.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.