Skeleton

Display

Loading placeholder with pixel styling.

Import

import { PixelSkeleton } from "@/components/ui/pixel-skeleton"

Usage

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel-skeleton.tsx

import { cn } from "@/lib/utils";

function PixelSkeleton({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      className={cn(
        "bg-[#e0e0e0] dark:bg-[#3a3a3a] border-2 border-black animate-pulse",
        className,
      )}
      {...props}
    />
  );
}

export { PixelSkeleton };

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.