React component for skeleton loading states, built using Tailwind CSS utility classes.

Features

• ⚛️ Modular components: Banner, TextBlock, ProductCards, etc.
• 🎨 Customizable shape, aspect ratio, and layout
• 🚀 Lightweight and easy to integrate

Installation

• npm install react-tailwind-shimmer

Tailwind Setup

• include the shimmer package in your tailwind.config.js so Tailwind can detect and apply the utility classes.

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/react-tailwind-shimmer/**/*.{js,ts,jsx,tsx}",
  ],
};

• In Tailwind CSS v4, a tailwind.config.js file is not generated by default. we need to use @source directive to explicitly define source files that Tailwind’s automatic content detection might not pick up.

// main.css
@import "tailwindcss";
@source "../node_modules/react-tailwind-shimmer/dist"; 

Usage

• Import the Shimmer component and pass in a frame array to define your loading layout:

import Shimmer from "react-tailwind-shimmer"

const loadingFrame = [
  {
    type: "banner",
    split: 2,
    aspect: "hero",
    circular: false,
  },
  {
    type: "textBlock",
    heading: true,
    linesCount: 3,
  },
  {
    type: "productCards",
    count: 6,
    perRow: 3,
  },
];

function App() {
  return (
    <div className="p-4">
      <Shimmer frame={loadingFrame} />
    </div>
  );
}

export default App;

Component Props

• banner

| Prop | Type | Default | Description | | ---------- | ------- | -------- | ---------------------------------------------------------------- | | split | number | 1 | Number of banner blocks in a row | | aspect | string | "hero" | Aspect ratio: "hero", "hero-half", "square", "rectangle" | | circular | boolean | false | If true, applies rounded-full |

• productCards

| Prop | Type | Default | Description | | -------- | ------ | ------- | ------------------------------------------------ | | count | number | 5 | Total number of product cards | | perRow | number | 4 | Cards per row (1–5)

• textBlock

| Prop | Type | Default | Description | | ------------ | ------- | ------- | -------------------------------------------- | | heading | boolean | false | Whether to show a heading line on top | | linesCount | number | 1 | Number of text lines to show (skeleton rows) |