Skeleton
Animated placeholder for content loading states. Three exports: Skeleton, SkeletonText, SkeletonCard.
Basic shapes
import { Skeleton } from '@canarist/ui'
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-3/4" />
<Skeleton className="h-10 w-10 rounded-full" />SkeletonText
import { SkeletonText } from '@canarist/ui'
<SkeletonText lines={3} />SkeletonCard
import { SkeletonCard } from '@canarist/ui'
<SkeletonCard />Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Shape and size via Tailwind classes (e.g. h-4 w-full, rounded-full). |
| lines | number | 3 | Number of text lines (SkeletonText only). |