Skeleton

The Skeleton component renders a pulsing placeholder that mimics the shape of content being loaded. It has no props of its own — control size and shape entirely through className.

Import

import { Skeleton } from '@nim-ui/components';

Basic Usage

Text Skeleton

View Code

<div className="space-y-2">
  <Skeleton className="h-4 w-3/4" />
  <Skeleton className="h-4 w-1/2" />
</div>

Common Patterns

Card Skeleton

Card Skeleton

View Code

<div className="space-y-3 rounded-lg border p-4">
  <Skeleton className="h-40 w-full rounded-md" />
  <Skeleton className="h-5 w-3/4" />
  <Skeleton className="h-4 w-1/2" />
  <Skeleton className="h-9 w-24" />
</div>

Avatar + Text Skeleton

Profile Skeleton

View Code

<div className="flex items-center gap-3">
  <Skeleton className="h-10 w-10 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-32" />
    <Skeleton className="h-3 w-24" />
  </div>
</div>

Props

Name	Type	Default	Description
className	string	-	Controls width, height, and shape (e.g., h-4 w-48 rounded-full)

The Skeleton component accepts all standard div HTML attributes.

Usage Examples

Conditional Loading

function UserProfile({ user, isLoading }: Props) {
  if (isLoading) {
    return (
      <div className="flex items-center gap-3">
        <Skeleton className="h-12 w-12 rounded-full" />
        <div className="space-y-2">
          <Skeleton className="h-4 w-40" />
          <Skeleton className="h-3 w-28" />
        </div>
      </div>
    );
  }

  return (
    <div className="flex items-center gap-3">
      <Avatar src={user.avatar} />
      <div>
        <p className="font-medium">{user.name}</p>
        <p className="text-sm text-neutral-500">{user.email}</p>
      </div>
    </div>
  );
}

Accessibility

• Uses animate-pulse CSS animation which respects prefers-reduced-motion
• Pair with appropriate aria-busy and aria-live attributes on the parent container

Related Components

• Spinner — Animated loading indicator
• Progress — Determinate progress bar