Halloween only 🎃 Get Wensity Pro for 31% less with
Wensity

Shimmering Skeleton Wrapper

One angled GPU sweep that travels across any placeholder geometry you wrap, never a separate shimmer stuttering per row.

elite micro interactionsshimmeringskeletonwrapperframer motion
Shimmering Skeleton Wrapper component preview

Overview

Shimmering Skeleton Wrapper is a React and Tailwind CSS skeleton loader, in Next.js or any React app, where one wrapper keeps every placeholder shimmering in sync. Build the shape with SkeletonBox, SkeletonLine, and SkeletonCircle, and each paints its own moving gradient, so light crosses the placeholders and never the gaps between them. Only background position animates, the wrapper sets aria-busy while loading, and reduced motion shows plain boxes. Duration, highlight, and base colors are props. Setting loading to false only stops the shimmer, so swap the skeleton for your real content yourself.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add shimmering-skeleton-wrapper

Usage

Import ShimmeringSkeletonWrapper from @/components/wensity/shimmering-skeleton-wrapper and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import {
  ShimmeringSkeletonWrapper,
  SkeletonBox,
  SkeletonLine,
  SkeletonCircle,
} from "@/components/wensity/shimmering-skeleton-wrapper";


export default function Example({ loading }: { loading: boolean }) {
  return (
    <ShimmeringSkeletonWrapper loading={loading} rounded="rounded-2xl">
      <div className="rounded-2xl border bg-white p-5">
        <div className="flex items-center gap-3">
          <SkeletonCircle size={44} />
          <div className="flex-1 space-y-2">
            <SkeletonLine width="55%" />
            <SkeletonLine width="35%" />
          </div>
        </div>
        <div className="mt-5 space-y-2">
          <SkeletonLine width="92%" />
          <SkeletonLine width="78%" />
        </div>
      </div>
    </ShimmeringSkeletonWrapper>
  );
}

Props

PropTypeDefaultDescription
childrenReact.ReactNode-Placeholder geometry to wrap. Use SkeletonBox / SkeletonLine / SkeletonCircle helpers.
loadingbooleantrueShow the skeleton shimmer. When false, renders children with no shimmer.
durationnumber1.6Sweep cycle duration in seconds.
highlightstring"var(--shimmer-hi)"Highlight color of the moving slice.
basestring"var(--shimmer-base)"Resting color of each placeholder box.
roundedstring-Optional border-radius class applied to the wrapper.

Related components

  • macOS Floating Dock component preview

    macOS Floating Dock

    A magnetic dock where icons inflate near the cursor and push their siblings aside.

  • Multi-Select Tag Input component preview

    Multi-Select Tag Input

    A tag input where pills pop in as you add them and slide out on remove, closing the gap without snapping the layout.

  • Cool Button component preview

    Cool Button

    A dual-layer orbit glow that soft-spins around the edge of any button or link you wrap it around, at zero layout cost.

  • File Uploader component preview

    File Uploader

    A bold red dropzone for any file, with gallery tiles and progress after upload.