CardSkeleton

skeletons

Loading placeholders shaped like cards and profiles.

It is a React component (often forwardRef) styled with Tailwind utility classes so you can drop it into layouts or compose it with other kit pieces.

blogs/components/skeletons/CardSkeleton.tsx

Preview

Source

import React, { forwardRef } from "react";

export const CardSkeleton = forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className = "", ...props }, ref) => {
  return (
    <div
      ref={ref}
      className={`w-64 p-4 border border-zinc-100 rounded-xl bg-white shadow-sm ${className}`}
      {...props}
    >
      <div className="w-full h-32 bg-zinc-200 rounded-lg animate-pulse mb-4"></div>
      <div className="space-y-3">
        <div className="h-3 bg-zinc-200 rounded animate-pulse w-full"></div>
        <div className="h-3 bg-zinc-200 rounded animate-pulse w-5/6"></div>
        <div className="h-3 bg-zinc-200 rounded animate-pulse w-2/3"></div>
      </div>
    </div>
  );
});
CardSkeleton.displayName = "CardSkeleton";