Enterprise UI Kit

Skeleton

SkeletonBlock

CircularSkeleton

TextSkeleton

CardSkeleton

How to use

Use Skeleton (single bar), SkeletonBlock (lines + buttons), CircularSkeleton (round), TextSkeleton, or CardSkeleton for loading placeholders. Add className for size and shape.

1. Import

tsx

import {
  Skeleton,
  SkeletonBlock,
  CircularSkeleton,
  TextSkeleton,
  CardSkeleton,
} from "@/app/components/ui";

2. Skeleton

tsx

<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-4 w-1/2" />

3. SkeletonBlock

tsx

<SkeletonBlock lines={3} />

4. CircularSkeleton

tsx

<CircularSkeleton size="sm" />
<CircularSkeleton size="md" />
<CircularSkeleton size="lg" />

5. TextSkeleton

tsx

<TextSkeleton lines={4} />

6. CardSkeleton

tsx

<CardSkeleton />