Component

Skeleton

A shimmering placeholder block with a randomized warm/cool tint and staggered timing per instance, so a screen full of skeletons never looks like it's blinking in lockstep.

The primitive

skeleton.tsx

<NativeSkeleton variant="text" lines={3} />

Example

Stands in for a list of avatar-plus-two-lines rows behind the shared loading-state wrapper, each one seeded by its row index so the shimmer never falls into a visible rhythm.

skeleton-example.tsx

{Array.from({ length: 3 }, (_, i) => (
  <div key={i} className="rounded-2xl border border-black/[0.04] bg-white/85 px-3 py-3">
    <div className="flex items-center gap-3">
      <NativeSkeleton variant="avatar" width={40} height={40} index={i * 10} />
      <div className="flex-1 flex flex-col gap-2">
        <NativeSkeleton height={14} width={`${60 + (i % 3) * 15}%`} index={i * 10 + 1} />
        <NativeSkeleton height={12} width={`${40 + (i % 2) * 20}%`} index={i * 10 + 2} />
      </div>
    </div>
  </div>
))}

Capabilities

Prop	Type	Description
width	number \| string	—
height	number \| string	—
variant	"text" \| "rect" \| "circle" \| "avatar"	—
lines	number	—
index	number	—
className	string	—