Skeleton

Use to show a placeholder while content is loading.

Installation

Install via CLI:

npx @sickui/cli add skeleton

Manual Installation

If you prefer to install manually, copy and paste the following code into your project.

npm install class-variance-authority clsx tailwind-merge

Usage

Variants

Use the variant prop to change the visual style of the Skeleton.

Default

Shimmer

Examples

Card Skeleton

Perfect for loading states of card components.

Loading State

A comprehensive loading state example showing profile, content, and action skeletons.

API Reference

Skeleton

PropTypeDefaultDescription
variant"default" | "shimmer""default"The visual variant of the skeleton
classNamestringundefinedAdditional CSS classes

Accessibility

The Skeleton component includes:

  • Semantic markup: Uses appropriate ARIA attributes for loading states
  • Reduced motion: Respects user's motion preferences
  • Screen reader support: Properly announced as loading content

Common Patterns

Text Skeleton

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

Avatar Skeleton

<Skeleton className="h-10 w-10 rounded-full" />

Button Skeleton

<Skeleton className="h-10 w-20" />

Image Skeleton

<Skeleton className="h-48 w-full rounded-lg" />

Best Practices

  1. Match dimensions: Make skeleton dimensions similar to actual content
  2. Use appropriate shapes: Round skeletons for avatars, rectangular for text
  3. Maintain layout: Prevent layout shifts when content loads
  4. Consider animation: Use shimmer variant sparingly to avoid distraction
  5. Accessibility: Always provide loading indicators for screen readers