Skeleton

Usage

import { Skeleton } from '@heroui/react';

Examples

Text Content

User Profile

List Items

Grid

Single Shimmer

A synchronized shimmer effect that passes over all skeleton elements at once. Apply the skeleton--shimmer class to a parent container and set animationType="none" on child skeletons.

Animation Types

Customization

Tailwind CSS

Global CSS

To customize the Skeleton component classes, you can use the @layer components directive. Learn more.

@layer components {
  /* Base skeleton styles */
  .skeleton {
    @apply bg-surface-secondary/50; /* Change base background */
  }

  /* Shimmer animation gradient */
  .skeleton--shimmer:before {
    @apply viasurface; /* Change shimmer gradient color */
  }

  /* Pulse animation */
  .skeleton--pulse {
    @apply animate-pulse opacity-75; /* Customize pulse animation */
  }

  /* No animation variant */
  .skeleton--none {
    @apply opacity-50; /* Style for static skeleton */
  }
}

Global Animation Configuration

You can set a default animation type for all Skeleton components in your application by defining the --skeleton-animation CSS variable:

/* In your global CSS file */
:root {
  /* Possible values: shimmer, pulse, none */
  --skeleton-animation: pulse;
}

/* You can also set different values for light/dark themes */
.light, [data-theme="light"] {
  --skeleton-animation: shimmer;
}

.dark, [data-theme="dark"] {
  --skeleton-animation: pulse;
}

This global setting will be overridden by the animationType prop when specified on individual components.

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Skeleton component uses these CSS classes (View source styles):

Base Class

.skeleton - Base skeleton styles with background and rounded corners

Animation Variant Classes

• .skeleton--shimmer - Adds shimmer animation with gradient effect (default)
• .skeleton--pulse - Adds pulse animation using Tailwind's animate-pulse
• .skeleton--none - No animation, static skeleton

Animation

The Skeleton component supports three animation types, each with different visual effects:

Shimmer Animation

The shimmer effect creates a gradient that moves across the skeleton element:

.skeleton--shimmer:before {
  @apply animate-skeleton via-surface-3 absolute inset-0 -translate-x-full
         bg-gradient-to-r from-transparent to-transparent content-[''];
}

The shimmer animation is defined in the theme using:

@theme inline {
  --animate-skeleton: skeleton 2s linear infinite;

  @keyframes skeleton {
    100% {
      transform: translateX(200%);
    }
  }
}

Pulse Animation

The pulse animation uses Tailwind's built-in animate-pulse utility:

.skeleton--pulse {
  @apply animate-pulse;
}

No Animation

For static skeletons without any animation:

.skeleton--none {
  /* No animation styles applied */
}

API Reference

Skeleton

Related Components