Skip to component
GGamma

Skeleton

Shape-preserving placeholders with shimmer, pulse, or static states.

New
Live previewUse keyboard to interact

Implementation

1import type { CSSProperties } from "react";2 3export type SkeletonProps = {4  width?: number | string;5  height?: number | string;6  shape?: "line" | "circle" | "rounded";7  animation?: "shimmer" | "pulse" | "none";8  className?: string;9};10 11/** Decorative placeholder. Put a loading status on the containing region. */12export function Skeleton({13  width = "100%",14  height = 12,15  shape = "line",16  animation = "shimmer",17  className = "",18}: SkeletonProps) {19  return (20    <span21      className={`gamma-skeleton gamma-skeleton-${shape} gamma-skeleton-${animation} ${className}`}22      style={{ width, height } satisfies CSSProperties}23      aria-hidden="true"24    />25  );26}