Skeleton

Placeholder loading component that mimics content structure while data loads. Provides visual feedback during asynchronous operations.

Shape Variants

Skeletons come in three shapes: rectangle (default), circle, and line.

Rectangle

Default shape for cards, images, and content blocks

Circle

Perfect for avatars and profile pictures

Line

Ideal for text content placeholders

Size Examples

Skeletons can be sized using Tailwind utility classes to match your content dimensions.

Small Elements

Medium Elements

Large Elements

Loading State Patterns

Common skeleton patterns for different content types.

Card Skeleton

List Skeleton

Text Content Skeleton

Profile Skeleton

Use Cases

Risk Alert Loading

Map Data Loading

Dashboard Widget Loading

Usage Guidelines

✓ Do

Match skeleton shapes to actual content structure
Use skeletons for predictable loading times (< 3 seconds)
Combine with spinners for longer operations
Keep skeleton layouts consistent with final content

✗ Don't

Use skeletons for very fast loading (< 300ms)
Create overly complex skeleton patterns
Use skeletons for error states
Mix skeleton shapes that don't match content

Accessibility

Uses role="status" for proper ARIA semantics
Includes aria-label="Loading" for screen readers
Hidden "Loading..." text for screen reader users
Animation respects prefers-reduced-motion settings
Neutral gray color ensures no accessibility issues
Pulse animation is subtle and non-distracting

Props

Prop	Type	Default	Description
shape	string	'rect'	rect, circle, line
class	string	''	Additional CSS classes (use for sizing: w-, h-)

Usage Example


<x-building-blocks.skeleton shape="rect" class="w-full h-48" />


<x-building-blocks.skeleton shape="circle" class="w-16 h-16" />


<div class="space-y-2">
    <x-building-blocks.skeleton shape="line" class="w-full" />
    <x-building-blocks.skeleton shape="line" class="w-3/4" />
    <x-building-blocks.skeleton shape="line" class="w-5/6" />
</div>


<div class="border rounded-lg p-6 space-y-4">
    <x-building-blocks.skeleton shape="rect" class="w-full h-48" />
    <div class="space-y-2">
        <x-building-blocks.skeleton shape="line" class="w-3/4" />
        <x-building-blocks.skeleton shape="line" class="w-full" />
    </div>
</div>