<SkeletonLine width="w-full" />
<SkeletonLine width="w-3/4" />
<SkeletonLine width="w-1/2" />

<SkeletonText lines={4} />

<SkeletonCard />

<table className="w-full"><tbody><SkeletonTableRow cols={4} /></tbody></table>

// Stat cards + table skeleton
<div className="space-y-4">
  <div className="grid grid-cols-3 gap-3">
    {[...Array(3)].map((_, i) => (
      <div key={i} className="border rounded-lg p-4 space-y-2">
        <SkeletonLine width="w-1/2" />
        <SkeletonLine width="w-3/4" className="h-5" />
        <SkeletonLine width="w-1/3" />
      </div>
    ))}
  </div>
  <table><tbody><SkeletonTableRow cols={4} /></tbody></table>
</div>

// Blog post / article skeleton
<div className="space-y-4">
  <SkeletonLine width="w-1/4" />        {/* category */}
  <SkeletonLine width="w-full" className="h-6" /> {/* title row 1 */}
  <SkeletonLine width="w-3/4" className="h-6" />  {/* title row 2 */}
  <div className="flex items-center gap-3">
    <SkeletonAvatar size="sm" />
    <SkeletonLine width="w-24" />
  </div>
  <div className="h-40 animate-pulse bg-surface-sunken rounded-xl" /> {/* hero */}
  <SkeletonText lines={4} />
</div>