Skeleton

Pulsing content placeholder block and SkeletonMimic structural wrapper for zero-layout-shift loading states.

// Plain markup
import { Skeleton, SkeletonMimic } from "@shavin/ui";

Text lines

<div className="flex w-64 flex-col gap-2">
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-5/6" />
  <Skeleton className="h-4 w-3/4" />
</div>

Shapes

<Skeleton className="h-12 w-12 rounded-full" />
<Skeleton className="h-20 w-32" />
<Skeleton className="h-20 w-20 rounded-[var(--radius-2xl)]" />

Card-style loading row

<div className="flex w-80 items-center gap-3 rounded-[var(--radius-2xl)] border border-hairline bg-surface p-4">
  <Skeleton className="h-10 w-10 rounded-full" />
  <div className="flex flex-1 flex-col gap-2">
    <Skeleton className="h-3.5 w-2/3" />
    <Skeleton className="h-3 w-1/3" />
  </div>
</div>

Mimic — auto-skeleton from real markup

{/* Wrap the LOADED layout; flip `loading` to show a matching skeleton.
    No hand-built placeholder — the real structure drives the shimmer. */}
<SkeletonMimic loading>
  <div className="flex w-80 items-center gap-3 rounded-[var(--radius-panel)] border border-hairline bg-surface p-4">
    <img src="/avatar.png" className="h-10 w-10 rounded-full" />
    <div className="flex flex-1 flex-col gap-1">
      <p className="font-medium">Jordan Rivera</p>
      <p className="text-sm text-fg-muted">jordan@example.com</p>
    </div>
    <button className="rounded-[var(--radius-lg)] border px-3 py-1.5 text-sm">Edit</button>
  </div>
</SkeletonMimic>

Props

Prop	Type	Default
className	string	—