Skeleton Card
Skeleton-of-a-card preset for grid loading states — shimmer bars mirroring a typical content card layout
SSR mode
Examples
Default — 3 text lines
With header
With header and footer
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| SkeletonCard | Skeleton-of-a-card preset for grid loading states. Renders animate-pulse shimmer bars that mirror a typical content card: an optional header bar, a configurable number of text lines with natural width variation (full / 5/6 / 3/4), and an optional button-shaped footer bar. |
SkeletonCard
Skeleton-of-a-card preset for grid loading states. Renders animate-pulse shimmer bars that mirror a typical content card: an optional header bar, a configurable number of text lines with natural width variation (full / 5/6 / 3/4), and an optional button-shaped footer bar.
| Property | Type | Required | Description |
|---|---|---|---|
| Lines | int | Number of skeleton text bars in the body. Width varies per line index for a natural look. Default: 3. | |
| WithHeader | bool | Show a taller header bar (h-5 w-2/3) above the text lines. Default: false. | |
| WithFooter | bool | Show a button-shaped footer bar (h-8 w-24) below the text lines. Default: false. | |
| Borders | bool | Toggles border border-border rounded-lg on the wrapper. Default: true. | |
| BgFilled | bool | Toggles bg-background on the wrapper. Default: true. | |
| Gutters | bool | Toggles p-4 gap-3 on the wrapper. Default: true. |