Skeleton Shimmer

Skeleton loading placeholders with animated shimmer gradient sweep and pulse fade.

npx uniqueui add skeleton-shimmer

Preview

Usage

import { SkeletonShimmer, SkeletonCard } from "@/components/ui/skeleton-shimmer";

export default function Example() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-10 w-full text-white">
      <SkeletonCard />
      <div className="space-y-4 p-6 rounded-xl border border-neutral-800 bg-neutral-900/50">
        <SkeletonShimmer width="80%" height={20} rounded="md" />
        <SkeletonShimmer count={4} height={14} />
        <div className="flex gap-3">
          <SkeletonShimmer width={100} height={36} rounded="lg" />
          <SkeletonShimmer width={100} height={36} rounded="lg" />
        </div>
      </div>
    </div>
  );
}

Props

Prop	Type	Description
`className`	`string`	Additional CSS configuration applied to the background container.
`width`	`string \| number`	Explicit CSS width for the placeholder element.
`height`	`string \| number`	Explicit CSS height for the placeholder element.
`rounded`	`"sm" \| "md" \| "lg" \| "xl" \| "full"`	Tailwind border-radius abstraction class string (e.g. 'md', 'full').
`count`	`number`	Number of consecutive skeleton items to iterate.
`gap`	`number`	Spacing separating consecutive skeleton layers.