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
UiTableSkeleton renders a <tbody>, so place it inside a table. UiDatatable renders one for you while is-loading is set.
<template>
<table class="table">
<UiTableSkeleton :skeleton-rows="8" :skeleton-cols="5" />
</table>
</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 | number | — | Explicit dimensions. Numbers are pixels. |
rounded | boolean | false | Fully rounded. |
customClass | string | string[] | null | — | Extra classes. |
skeletonStyles | StyleValue | — | Inline styles, merged with width / height. |
role | string | 'status' | ARIA role. |
ariaLabel | string | 'Loading content' | Accessible name. |
ariaLive | 'off' | 'polite' | 'assertive' | 'polite' | Live-region politeness. |
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. |
role | string | 'status' | ARIA role. |
ariaLabel | string | 'Loading content grid' | Accessible name. |
ariaLive | 'off' | 'polite' | 'assertive' | 'polite' | Live-region politeness. |
UiTableSkeleton props
| Prop | Type | Default | Description |
|---|---|---|---|
skeletonRows | number | 12 | Placeholder rows. |
skeletonCols | number | 5 | Placeholder columns. |
isExpanded / skeletonColExpanded | boolean / number | false / 7 | When expanded, renders skeletonColExpanded columns instead of skeletonCols. |
customClass | string | string[] | null | — | Extra classes. |
skeletonStyles | StyleValue | — | Inline styles for the <tbody>. |
role | string | 'status' | ARIA role. |
ariaLabel | string | 'Loading table data' | Accessible name. |
ariaLive | 'off' | 'polite' | 'assertive' | 'polite' | Live-region politeness. |
CSS variables
Set these on :root or on a wrapper. The shimmer highlight follows the color, and the AI-generation skeleton keeps its larger corners.
| Variable | Default | Controls |
|---|---|---|
--cffy-skeleton-color | --cffy-muted-a10 | Placeholder color (and shimmer) |
--cffy-skeleton-radius | --cffy-radius-md | Placeholder corners |