Skeleton

Animated pulse placeholder components for loading pipelines, content blocks, or media players.

Preview & Interactive Laboratory

Profile Loading Template

Interactive Post Loader

Usage & Implementation

import { Skeleton } from "@/components/ui/skeleton"

<div className="flex gap-4">
  <Skeleton className="h-12 w-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-48" />
    <Skeleton className="h-4 w-32" />
  </div>
</div>
React / Tailwind

Granular Customization

1

Pulse Block

Configures default sizes, dimensions, or custom pulse background tones.

className={`className='bg-violet-100'`}
2

Border Radius

Set the custom rounding parameters for loading mockups.

className={`className='rounded-full'`}

API Reference (Props)

PropTypeDefaultDescription
classNamestringundefinedStandard utility class mapping.