Skeleton

Pick a framework. Both use the same recipe, so the styling matches exactly.

Skeleton props for React
Prop	Type	Default	Description
class	string		Size it with utilities, for example h-4 w-32.

Also takes className and children. Anything else passes through to the div.

skeleton.demo.tsx

import { Skeleton } from "../react/index.js";

export default function SkeletonDemo() {
  return (
    <div className="flex max-w-sm flex-col gap-3">
      <Skeleton className="h-4 w-3/4" />
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-24 w-full" />
    </div>
  );
}

Skeleton props for Svelte
Prop	Type	Default	Description
class	string		Size it with utilities, for example h-4 w-32.

Also takes class and snippet children. Anything else passes through to the div.

skeleton.demo.svelte

<script lang="ts">
  import { Skeleton } from "../svelte/index.js";
</script>

<div class="flex max-w-sm flex-col gap-3">
  <Skeleton class="h-4 w-3/4" />
  <Skeleton class="h-4 w-full" />
  <Skeleton class="h-24 w-full" />
</div>