Component

Skeleton

Name: Forge
Rating: 5 (1 reviews)
Author: Webba Creative

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 />

Notification

Spinner

Last updated: December 2025