Skeleton

The Skeleton primitive is a pulsing placeholder that holds a component's shape while its data loads — size it with utility classes (h-*, w-*, rounded-*) to match the content it stands in for. It is a plain styled div, so it accepts any native div prop.

Preview

import { Skeleton } from '@web/components/ui/skeleton';export default function SkeletonDemo() {  return (    <div className="flex items-center gap-4">      <Skeleton className="size-12 rounded-full" />      <div className="space-y-2">        <Skeleton className="h-4 w-[200px]" />        <Skeleton className="h-4 w-[160px]" />      </div>    </div>  );}

Import

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

Props

Skeleton accepts all native <div> props plus className — there are no component-specific props; shape and size come entirely from the classes you apply.