Skeleton & Switch Component Test

Testing skeleton loading states and switch toggles

Skeleton - Card Loading

Skeleton - List Loading

Skeleton - Various Shapes

Switch - Basic

Airplane Mode

Switch - With State

Push NotificationsReceive notifications about your account activity

Marketing EmailsReceive emails about new products and features

AnalyticsHelp us improve by sharing usage data

Switch - Disabled

Disabled (Off)

Disabled (On)

Implementation Notes

✅ Skeleton: bg-muted for loading states
✅ Flexible sizing via className
✅ Works with any border-radius
✅ Switch: Shadcn's h-5 w-9 sizing
✅ Relume's shadow-lg on thumb for depth
✅ Controlled and uncontrolled modes
✅ Disabled state support
✅ Focus ring with offset for accessibility