Skeleton

PreviewExampleCode

Edu Calvo

@educalvolpz

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

FollowMessage

Show content

Installation

pnpm dlx shadcn add @smoothui/skeleton-loader

npx shadcn@latest add @smoothui/skeleton-loader

yarn dlx shadcn add @smoothui/skeleton-loader

bunx shadcn add @smoothui/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

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>