Component

Skeleton

Placeholder loading states that mimic content layout while data is loading.

tsx
import { Skeleton, SkeletonText, SkeletonCard, SkeletonTable } from 'wss3-forge'

Usage

Use to indicate content is loading

Match skeleton shape to actual content

SkeletonCard/SkeletonTable for common patterns

Pulse animation by default

Better UX than spinners for content areas


Examples

Basic Variants

tsx
1<VStack gap="md">
2 <Skeleton width="100%" height={20} />
3 <Skeleton variant="rounded" width="60%" height={16} />
4 <HStack gap="md" align="center">
5 <Skeleton variant="circular" width={40} height={40} />
6 <VStack gap="sm" style={{ flex: 1 }}>
7 <Skeleton width="50%" height={14} />
8 <Skeleton width="30%" height={12} />
9 </VStack>
10 </HStack>
11</VStack>

Skeleton Text

tsx
1<SkeletonText lines={4} />

Skeleton Card

tsx
1<SkeletonCard />

Skeleton Table

tsx
1<SkeletonTable rows={3} columns={4} />

Skeleton Stat Card

tsx
1<SkeletonStatCard />

Previous

Notification

Next

Spinner

Last updated: December 2025

Cookies

We use cookies to improve your experience and save your preferences.