Component
Skeleton
Placeholder components for loading states with a brutalist pulse animation.
Variants
Different shapes for different contents
tsx
<Skeleton variant="heading" />
<Skeleton variant="text" lines={3} />
<div style={{ display: 'flex', gap: 16 }}>
<Skeleton variant="avatar" size="lg" />
<Skeleton variant="card" width={200} height={120} />
</div>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'text' | 'heading' | 'avatar' | 'card' | 'button' | 'image' | 'text' | Shape variant of the skeleton. |
| size | 'sm' | 'md' | 'lg' | 'md' | Size preset (mostly applies to avatar). |
| width | string | number | — | Custom width. |
| height | string | number | — | Custom height. |
| lines | number | 1 | Number of skeleton lines to render (for text variant). |
| borderless | boolean | false | Removes the solid black border. |