Skeleton

Basic

Loading placeholders that mimic the shape of content before it loads. Supports text lines, circles, and rectangles with a gentle pulse animation.

<div className="flex items-center gap-3"><SkeletonCircle size="md" /><div className="flex flex-col gap-2 flex-1">  <SkeletonText lines={1} className="w-3/4" />  <SkeletonText lines={1} className="w-1/2" size="sm" /></div></div><SkeletonRect width="100%" height={120} /><SkeletonText lines={3} />

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add skeleton

pnpm dlx @work-rjkashyap/unified-ui add skeleton

npx @work-rjkashyap/unified-ui add skeleton

bunx @work-rjkashyap/unified-ui add skeleton

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import {
	Skeleton,
	SkeletonText,
	SkeletonCircle,
	SkeletonRect,
} from "@work-rjkashyap/unified-ui";

Basic Skeleton

The base Skeleton component renders a single animated placeholder. Use the shape prop to control its form.

<Skeleton shape="text" />
<Skeleton shape="circle" size="md" />
<Skeleton shape="rect" width={200} height={120} />

SkeletonText

Renders one or more text-line placeholders. Use the lines prop to control the number of lines. The last line is automatically shorter for a natural appearance.

<SkeletonText lines={1} /><SkeletonText lines={3} /><SkeletonText lines={5} />

Text Sizes

Two sizes control the height of each text line to match your typography scale.

<SkeletonText lines={2} size="sm" /><SkeletonText lines={2} size="md" />

SkeletonCircle

Renders a circular placeholder. Perfect for avatar and icon loading states.

<SkeletonCircle size="xs" />  {/* 24px */}<SkeletonCircle size="sm" />  {/* 32px */}<SkeletonCircle size="md" />  {/* 40px — default */}<SkeletonCircle size="lg" />  {/* 48px */}<SkeletonCircle size="xl" />  {/* 64px */}

SkeletonRect

Renders a rectangular placeholder with configurable width and height. Useful for images, cards, and media content loading states.

<SkeletonRect width="100%" height={80} /><SkeletonRect width={200} height={120} /><SkeletonRect width="50%" height={60} />

Composition Examples

User Card Skeleton

A common loading pattern for user profile cards.

<Card><CardBody>  <div className="flex items-center gap-3 mb-4">    <SkeletonCircle size="lg" />    <div className="flex flex-col gap-2 flex-1">      <SkeletonText lines={1} className="w-2/3" />      <SkeletonText lines={1} className="w-1/3" size="sm" />    </div>  </div>  <SkeletonText lines={3} /></CardBody></Card>

Article Skeleton

A loading placeholder for article or blog post content.

<SkeletonRect width="100%" height={160} /><SkeletonText lines={1} className="w-3/4" size="md" /><SkeletonText lines={1} className="w-1/2" size="sm" /><SkeletonText lines={4} />

Table Row Skeleton

Loading state for data table rows.

{rows.map((_, i) => (<div key={i} className="flex items-center gap-3">  <SkeletonCircle size="sm" />  <SkeletonText lines={1} className="flex-1" />  <Skeleton shape="text" className="w-16" />  <Skeleton shape="text" className="w-20" /></div>))}

Custom Dimensions

Both width and height accept numbers (pixels) or strings (CSS values like percentages or auto).

// Pixel values
<SkeletonRect width={300} height={200} />

// CSS string values
<SkeletonRect width="100%" height={120} />
<SkeletonRect width="50%" height="8rem" />

// Full width text
<SkeletonText lines={2} className="w-full" />

Props

Skeleton

SkeletonText

SkeletonCircle

SkeletonRect

Accessibility

• All skeleton elements render with aria-hidden="true" so screen readers skip them.
• The root element uses role="presentation" to indicate decorative content.
• The pulse animation automatically respects prefers-reduced-motion — when the user prefers reduced motion, the animation is disabled via the global CSS rule in styles.css.
• When using skeletons as loading states, ensure the surrounding container or page communicates the loading state to assistive technology (e.g., via aria-busy="true" on the parent, or a visually hidden "Loading..." text).

Reduced Motion

The skeleton pulse animation is defined via animate-pulse in Tailwind, which is automatically disabled when the user has prefers-reduced-motion: reduce enabled. No additional configuration is needed.

/* Handled globally in styles.css */
@media (prefers-reduced-motion: reduce) {
	.animate-pulse {
		animation: none;
	}
}

Design Tokens