Skeleton

Skeleton placeholders provide visual feedback while content is loading. They use a pulse/shimmer animation to indicate activity.

Text Placeholder

tsx

<Skeleton height={14} width="100%" />
<Skeleton height={14} width="100%" />
<Skeleton height={14} width="60%" />

Card Placeholder

tsx

<div style={{ borderRadius: 16, border: "1px solid #e5e5e5", overflow: "hidden" }}>
  <Skeleton height={160} borderRadius={0} />
  <div style={{ padding: 20 }}>
    <Skeleton height={18} width="70%" />
    <Skeleton height={14} width="100%" />
    <Skeleton height={36} width={120} borderRadius={8} />
  </div>
</div>

Image Placeholder

tsx

<Skeleton width={200} height={200} borderRadius={16} />
<Skeleton width={200} height={200} borderRadius={9999} />

List Rows

tsx

<div style={{ display: "flex", alignItems: "center", gap: 14 }}>
  <Skeleton width={40} height={40} borderRadius={9999} />
  <div style={{ flex: 1 }}>
    <Skeleton height={14} width="40%" />
    <Skeleton height={12} width="65%" />
  </div>
  <Skeleton height={28} width={80} borderRadius={8} />
</div>

Props

Prop	Type	Default	Description	Required
width	`number \| string`	"100%"	Element width	No
height	`number \| string`	16	Element height	No
borderRadius	`number`	8	Corner radius in pixels	No
style	`CSSProperties`	-	Additional inline styles	No

Usage Guidelines

Use skeleton loaders instead of spinners for content-heavy pages.
Match skeleton shapes to the actual content layout for a smooth transition.
Use rounded skeletons for avatars and square for images.
Combine multiple Skeleton elements to create composite loading states.