Docs/Skeleton

Skeleton

Animated loading placeholder. Shape controlled via className or the variant prop.

Usage

tsx

1import { Skeleton } from '@storm-ds/ui'
2
3<Skeleton className="h-4 w-48" />

Examples

Variants

tsx

1<Skeleton variant="default" className="h-4 w-48" />
2<Skeleton variant="circle" className="h-10 w-10" />
3<Skeleton variant="text" className="w-3/4" />

Card Skeleton

Props

Prop	Type	Default	Description
variant	'default' \| 'circle' \| 'text'	'default'	Shape variant
className	string	-	Controls shape, size, and radius (e.g. h-4 w-48, rounded-full)

Use with AI

Create a Next.js component using Storm UI's Skeleton. Import: `import { Skeleton } from '@storm-ds/ui'`. Animated pulse div with bg-storm-muted. Use the `variant` prop to control shape: 'default' (rectangle), 'circle' (rounded-full), 'text' (short rounded line). Further control shape via className. Compose multiple Skeletons to build card or list loading states. Example: `<Skeleton variant="circle" className="h-10 w-10" />` for avatar, `<Skeleton variant="text" className="w-3/4" />` for text line, or compose inside a card layout for a full card skeleton.

Avatar

Separator