Skeleton
CSS shimmer placeholder for loading states. Includes SkeletonText and SkeletonAvatar helpers.
Live Demo
Props
| Prop | Type | Default | Description |
|---|---|---|---|
width | string | number | 100% | Width of the skeleton element. |
height | string | number | 1rem | Height of the skeleton element. |
borderRadius | string | number | var(--border-radius-sm) | Border radius of the skeleton. |
className | string | — | Additional CSS class names. |
Usage
import { Skeleton, SkeletonText, SkeletonAvatar } from '@ghiberti85/ui'
// Basic
<Skeleton width="200px" height="20px" />
// Multi-line text
<SkeletonText lines={3} />
// Avatar placeholder
<SkeletonAvatar size={40} shape="circle" />
// Card skeleton
<div>
<Skeleton height="160px" />
<SkeletonText lines={3} />
</div>