Skip to main content
Sync UI provides clean skeleton loaders with custom animations built on motion/react — offering shimmer, pulse, and wave effects that feel premium and polished. Each variant is fully customizable with width, height, and rounded props for complete flexibility.

​
Variants

​
Shimmer

A smooth gradient sweep animation that gives users the “premium app” feel seen in Netflix, Instagram, and LinkedIn.

​
Pulse

A subtle breathing effect with smooth opacity transitions — minimal, accessible, and less distracting than shimmer.

​
Wave

A unique staggered animation with flowing bars — eye-catching and modern, perfect for dashboard cards and content feeds.

​
Props

All skeleton variants accept the following props:
  • width - Width of the skeleton (string or number, default: “100%”)
  • height - Height of the skeleton (number, default: 20)
  • rounded - Whether to apply rounded corners (boolean, default: false)

​
Usage Examples

​
Card Layout

Build a profile card skeleton with avatar and text lines. 
<Box sx={{ display: "flex", gap: 2, p: 2 }}>
  <SkeletonVariants variant="shimmer" width={60} height={60} rounded />
  <Box sx={{ flex: 1 }}>
    <SkeletonVariants variant="shimmer" width={200} height={20} />
    <Box sx={{ mt: 1 }}>
      <SkeletonVariants variant="shimmer" width={150} height={16} />
    </Box>
  </Box>
</Box>

​
Text Lines

Create multi-line text skeletons with varying widths. 
<Box sx={{ width: "100%" }}>
  <SkeletonVariants variant="pulse" width="100%" height={14} />
  <Box sx={{ mt: 1 }}>
    <SkeletonVariants variant="pulse" width="90%" height={14} />
  </Box>
  <Box sx={{ mt: 1 }}>
    <SkeletonVariants variant="pulse" width="60%" height={14} />
  </Box>
</Box>

​
List Items

Build list item skeletons with avatars. 
<Box sx={{ width: "100%" }}>
  {[1, 2, 3].map((i) => (
    <Box key={i} sx={{ display: "flex", gap: 2, mb: 2, alignItems: "center" }}>
      <SkeletonVariants variant="wave" width={40} height={40} rounded />
      <Box sx={{ flex: 1 }}>
        <SkeletonVariants variant="wave" width="60%" height={14} />
        <Box sx={{ mt: 0.5 }}>
          <SkeletonVariants variant="wave" width="40%" height={10} />
        </Box>
      </Box>
    </Box>
  ))}
</Box>

​
Features

  • Theme-aware (adapts to dark/light mode)
  • Smooth animations using Framer Motion
  • Flexible sizing and styling
  • Premium feel animations
  • Minimal performance overhead

​
Best Practices

  • Use Shimmer for content-heavy feeds and lists
  • Use Pulse for minimal, accessible loading states
  • Use Wave for dashboard cards and highlight elements
  • Match skeleton dimensions to actual content for seamless transitions
  • Combine multiple skeletons to match your layout structure

​
Customization

Each skeleton can be customized by modifying:
  • Width and height dimensions
  • Border radius (rounded prop)
  • Animation duration and timing
  • Colors (automatically theme-aware)

Build docs developers (and LLMs) love

Get started for freeTalk to us