Skeleton

Use to show a placeholder while content is loading.

Examples

Default

<div class="flex items-center space-x-4">
  <c-skeleton skeleton-classes="size-12 rounded-full"></c-skeleton>
  <div class="space-y-2">
    <c-skeleton skeleton-classes="h-4 w-[250px]"></c-skeleton>
    <c-skeleton skeleton-classes="h-4 w-[200px]"></c-skeleton>
  </div>
</div>

Card

<div class="flex flex-col space-y-3">
  <c-skeleton skeleton-classes="h-[125px] w-[250px] rounded-xl"></c-skeleton>
  <div class="space-y-2">
    <c-skeleton skeleton-classes="h-4 w-[250px]"></c-skeleton>
    <c-skeleton skeleton-classes="h-4 w-[200px]"></c-skeleton>
  </div>
</div>

API Reference

Skeleton

Displays a placeholder element with pulsing animation while content is loading.

Prop Type Default Description
skeleton-classes string '' Additional Tailwind CSS classes to customize size, shape, and appearance

Usage

<c-skeleton skeleton-classes="h-[20px] w-[100px] rounded-full"></c-skeleton>

The skeleton component uses bg-accent and animate-pulse classes by default. Customize dimensions and border radius using the skeleton-classes prop.