unlumen

Unlumen Shimmer Skeleton

Component

About

Lightweight loading skeleton with a smooth shimmer sweep animation from Unlumen UI.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Unlumen Shimmer Skeleton to your project and fits it to your theme.

Code

How Unlumen Shimmer Skeleton is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ShimmerSkeleton } from "@/components/ui/unlumen-shimmer-skeleton";

export default function Demo() {
  return (
    <div className="w-full max-w-sm space-y-4 p-8">
      <div className="space-y-3">
        <ShimmerSkeleton className="h-40 w-full" rounded="lg" />
        <div className="flex items-center gap-3">
          <ShimmerSkeleton className="h-10 w-10 shrink-0" rounded="full" />
          <div className="flex-1 space-y-2">
            <ShimmerSkeleton className="h-3.5 w-3/4" />
            <ShimmerSkeleton className="h-3 w-1/2" />
          </div>
        </div>
        <ShimmerSkeleton className="h-3 w-full" />
        <ShimmerSkeleton className="h-3 w-5/6" />
        <ShimmerSkeleton className="h-3 w-4/6" />
      </div>
    </div>
  );
}

More by unlumen

View all
  • Motion Navigation Menu

    Motion Navigation Menu

    271
  • Side By Side Slide

    Side By Side Slide

    228
  • Scroll Reveal Image

    Scroll Reveal Image

    222
  • Count Up

    Count Up

    145
  • Pixel Liquid Background

    Pixel Liquid Background

    106
  • Glow Button

    Glow Button

    97
  • Animated Sidebar

    Animated Sidebar

    95
  • Horizontal Depth Fade

    Horizontal Depth Fade

    78