Components
Skeleton
Placeholder loaders for content, grids, and tables.
Three skeleton loaders: UiBaseSkeleton (a single shimmer block), UiGridSkeleton (card grid), and UiTableSkeleton (table rows).
Base skeleton
<template>
<UiBaseSkeleton width="100%" height="1.25rem" />
<UiBaseSkeleton variant="thumbnail" size="lg" />
<UiBaseSkeleton width="64px" height="64px" rounded />
</template>
Grid skeleton
<template>
<UiGridSkeleton :skeleton-grid-items="8" card-variant="pane" />
</template>
Table skeleton
<template>
<UiTableSkeleton :skeleton-rows="8" :skeleton-cols="5" />
</template>
UiBaseSkeleton props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Size token. |
variant | 'default' | 'thumbnail' | 'ai-generation' | 'shimmer' | 'default' | Visual style. |
width / height | string | — | Explicit dimensions. |
rounded | boolean | false | Fully rounded. |
UiGridSkeleton props
| Prop | Type | Default | Description |
|---|---|---|---|
skeletonGridItems | number | 12 | Number of placeholder cards. |
gridLayoutClasses | string | string[] | — | Grid layout classes. |
cardVariant | string | 'pane' | Card surface. |
showFooter | boolean | true | Render a card footer skeleton. |
UiTableSkeleton props
| Prop | Type | Default | Description |
|---|---|---|---|
skeletonRows | number | 12 | Placeholder rows. |
skeletonCols | number | 5 | Placeholder columns. |
isExpanded | boolean | false | Expanded layout. |