Skeleton
An enterprise-level skeleton screen component based on design tokens provided by BrConfigProvider. It supports multiple shapes, animations, and perfect theme adaptation, used as loading placeholders for pages, lists, and forms.
Component Features
- 📦 Multiple Shapes: Supports rectangle, circle, text, avatar, and card skeletons.
- ⚡ Animations: Supports
pulse, wave, and none animation modes.
- 🏗️ Component Skeletons: Specialized skeletons for text, card, and avatar components.
- 📚 Z-Index Manager: Built-in z-index management for skeleton overlays.
- 🎨 Theme Customization: Based on
BrConfigProvider for global theming and TailwindCSS local overrides.
Basic Usage
You can create basic rectangular placeholders using the Skeleton component.
<template>
<div class="flex flex-col gap-4">
<Skeleton class="h-12 w-12 rounded-full" />
<div class="space-y-2">
<Skeleton class="h-4 w-[250px]" />
<Skeleton class="h-4 w-[200px]" />
</div>
</div>
</template>
<script setup>
import { Skeleton } from '@breeze-ui/vue'
</script>
Multi-line Text
Use SkeletonText to quickly create multi-line text skeletons. It supports customizing the number of lines, the width of the last line, and the gap between lines.
<template>
<SkeletonText :lines="4" last-line-width="40%" gap="16px" />
</template>
<script setup>
import { SkeletonText } from '@breeze-ui/vue'
</script>
Card Composition
Use SkeletonCard to quickly create a card placeholder containing an avatar, title, and body text.
<template>
<SkeletonCard :avatar="true" :title="true" :action="true" :lines="3" />
</template>
<script setup>
import { SkeletonCard } from '@breeze-ui/vue'
</script>
Avatar and Text Combination
Combining SkeletonCircle and SkeletonText.
<template>
<div class="flex items-center space-x-4">
<SkeletonCircle size="48px" />
<div class="flex-1">
<SkeletonText :lines="2" />
</div>
</div>
</template>
<script setup>
import { SkeletonCircle, SkeletonText } from '@breeze-ui/vue'
</script>
Animations
Supports pulse (default) and wave animations, or you can turn off the animation by setting it to none.
<template>
<div class="space-y-8 w-full max-w-md">
<div class="space-y-2">
<div class="text-sm text-muted-foreground">Pulse (Default)</div>
<SkeletonText animation="pulse" :lines="2" />
</div>
<div class="space-y-2">
<div class="text-sm text-muted-foreground">Wave</div>
<SkeletonText animation="wave" :lines="2" />
</div>
<div class="space-y-2">
<div class="text-sm text-muted-foreground">None</div>
<SkeletonText animation="none" :lines="2" />
</div>
</div>
</template>
<script setup>
import { SkeletonText } from '@breeze-ui/vue'
</script>
Integration with Tables
Example of integrating with a table list.
<template>
<div class="w-full">
<table class="w-full">
<thead>
<tr class="border-b bg-muted/50 text-left">
<th class="p-4 font-medium text-sm text-muted-foreground">Name</th>
<th class="p-4 font-medium text-sm text-muted-foreground">Status</th>
<th class="p-4 font-medium text-sm text-muted-foreground">Role</th>
</tr>
</thead>
<tbody>
<tr v-for="i in 3" :key="i" class="border-b">
<td class="p-4">
<div class="flex items-center space-x-3">
<SkeletonCircle size="32px" />
<Skeleton class="h-4 w-24" />
</div>
</td>
<td class="p-4"><Skeleton class="h-6 w-16 rounded-full" /></td>
<td class="p-4"><Skeleton class="h-4 w-20" /></td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
import { Skeleton, SkeletonCircle } from '@breeze-ui/vue'
</script>
Typical application scenarios for integrating with form items.
<template>
<div class="space-y-6 w-full max-w-md">
<div class="space-y-2">
<Skeleton class="h-4 w-16" />
<SkeletonInput size="md" class="w-full" />
</div>
<div class="space-y-2">
<Skeleton class="h-4 w-16" />
<SkeletonInput size="md" class="w-full" />
</div>
<SkeletonButton size="md" class="w-full" />
</div>
</template>
<script setup>
import { Skeleton, SkeletonInput, SkeletonButton } from '@breeze-ui/vue'
</script>
Theme Customization
The component is fully compatible with CSS variables injected by BrConfigProvider. You can directly modify variables like --muted under :root and .dark to adjust colors. The border radius inherits the --radius variable.
API Reference
Skeleton
SkeletonText
SkeletonCircle
SkeletonCard
SkeletonManager
Provides multi-instance layer management. Use skeletonManager.nextZIndex() to automatically increment and return the z-index.