Skeleton

Preview

Code

import { Skeleton } from "@/components/ui/skeleton";

export function Example() {
  return (
    <div className="space-y-3">
      <Skeleton className="h-4 w-3/4" />
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-4 w-5/6" />
    </div>
  );
}

Props

Sized via Tailwind utilities on the className (e.g. `h-4 w-3/4`). Auto-applies `aria-hidden="true"`.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/skeleton.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

import { cn } from "@/lib/utils";
import { type HTMLAttributes, forwardRef } from "react";

export const Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      aria-hidden="true"
      className={cn("animate-pulse rounded-md bg-bg-muted", className)}
      {...props}
    />
  ),
);
Skeleton.displayName = "Skeleton";

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmSkeleton (extends Region). Run the gallery to see it natively.

import design.prizm.fx.controls.PrizmSkeleton;

PrizmSkeleton()
PrizmSkeleton(double width, double height)

Muted loading block with an indefinite opacity pulse (mirrors animate-pulse). Size via the constructor / setPrefSize. Mirrors components/ui/skeleton.tsx.