react-skeleton-shimmer

Lightweight skeleton and shimmer loading components for React with zero dependencies.

Installation

npm install react-skeleton-shimmer

Quick Start

import React from 'react';
import Skeleton, {
  SkeletonTheme,
  SkeletonParagraph,
  SkeletonCard,
  ShimmerImage,
} from 'react-skeleton-shimmer';

export default function UserProfile() {
  return (
    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
      <Skeleton circle width={50} height={50} />
      <div style={{ flex: 1 }}>
        <Skeleton width="60%" height={20} style={{ marginBottom: 6 }} />
        <Skeleton width="40%" height={14} />
      </div>
    </div>
  );
}

Components

1. Skeleton

The base shimmer skeleton placeholder.

// Basic text line
<Skeleton />

// Multiple lines
<Skeleton count={3} />

// Circle / Avatar
<Skeleton circle width={48} height={48} />

// Button / Badge / Rounded shapes
<Skeleton variant="button" width={120} height={36} />
<Skeleton variant="badge" width={60} height={22} />
<Skeleton variant="rounded" width="100%" height={180} />

// Pulse animation
<Skeleton animation="pulse" height={24} />

2. SkeletonTheme

Provides theme defaults for all nested skeletons.

<SkeletonTheme baseColor="#202020" highlightColor="#444444" borderRadius="8px">
  <Skeleton height={200} />
  <Skeleton count={3} />
</SkeletonTheme>

3. SkeletonParagraph

Generates a realistic multi-line paragraph block.

<SkeletonParagraph lines={4} lineHeight="14px" gap="8px" lastLineWidth="70%" />

4. SkeletonCard

Ready-to-use card skeleton with media banner, avatar, text, and action button.

<SkeletonCard hasImage hasAvatar lines={3} hasAction />

5. ShimmerImage

Displays a shimmer skeleton while the image loads and fades the image in once ready.

<ShimmerImage
  src="https://example.com/image.jpg"
  alt="Sample"
  width={300}
  height={200}
  borderRadius={8}
/>

6. SkeletonWrapper

Helper for switching between skeleton and real content.

<SkeletonWrapper loading={isLoading} fallback={<Skeleton count={3} />}>
  <MyContent />
</SkeletonWrapper>

License

MIT