Skeleton

Animated loading placeholder that preserves layout while content is fetching and gives users a clearer sense of what is about to appear.

AccessibleDark Mode3 VariantsAnimated

Install

$npx react-principles add skeleton

Theme Preview

Light

Dark

Live Demo

Open in Storybookopen_in_new

Line

Rect

Circle

Code Snippet

src/ui/Skeleton.tsx

import { Skeleton } from "@/ui/Skeleton";

<div className="space-y-3">
  <Skeleton variant="line" width="70%" />
  <Skeleton variant="line" width="45%" />
  <Skeleton variant="rect" className="h-24" />
</div>

Copy-Paste (Single File)

Skeleton.tsx

import { cn } from "@/lib/utils";

export type SkeletonVariant = "line" | "rect" | "circle";

export interface SkeletonProps {
  variant?: SkeletonVariant;
  width?: number | string;
  height?: number | string;
  className?: string;
}

Props

Prop	Type	Default	Description
`variant`	`"line" \| "rect" \| "circle"`	`"line"`	Switches between text-line, block, and circular placeholder shapes.
`width`	`number \| string`	`—`	Optional inline width override for the placeholder.
`height`	`number \| string`	`—`	Optional inline height override for the placeholder.
`className`	`string`	`—`	Additional classes merged into the skeleton element.

react-principles