Skeleton

PreviewExampleCode

Edu Calvo

@educalvolpz

Exploring the mountains and capturing moments. Nature photographer based in Colorado.

FollowMessage

Show content

Installation

npx smoothui-cli add skeleton-loader

Features

• Auto-adaptive: Wrap any component and skeleton matches its exact shape
• Uses Tailwind's animate-pulse for smooth animation
• Toggle between loading/loaded states with loading prop
• Works with any component structure
• Accessible with ARIA attributes

Accessibility

ARIA Attributes

• Sets aria-busy="true" on the container while loading, signaling to assistive technologies that content is being loaded.
• Uses aria-live="polite" so screen readers announce when content finishes loading.
• Marks the pulse overlay with aria-hidden="true" to hide decorative elements from the accessibility tree.

Reduced Motion

Uses Tailwind's animate-pulse for the shimmer effect. Tailwind respects the prefers-reduced-motion media query at the CSS level, but the component does not include an explicit JavaScript-level useReducedMotion check.

Props

Usage

Wrap your UI

Simply wrap your component - the skeleton will match its exact dimensions:

<Skeleton loading={isLoading}>
  <UserCard user={user} />
</Skeleton>

Basic blocks

Use without children for simple skeleton shapes:

<div className="flex items-center gap-4">
  <Skeleton className="size-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[200px]" />
    <Skeleton className="h-4 w-[160px]" />
  </div>
</div>