Documentation Index
Fetch the complete documentation index at: https://mintlify.com/nuxt/ui/llms.txt
Use this file to discover all available pages before exploring further.
Usage
Use the USkeleton component to show loading placeholders while content is being fetched.
<template>
<USkeleton class="h-4 w-full" />
</template>
Props
The element or component this component should render as.
<USkeleton as="span" class="h-4 w-20" />
class
Additional CSS classes to apply to the skeleton. Use this to control the size and shape.
<USkeleton class="h-12 w-12 rounded-full" />
base - The base styles applied to the skeleton
Slots
default
The skeleton automatically has a pulsing animation. You can place content inside that will be hidden while loading.
<USkeleton class="h-20 w-full">
<!-- Content will show when loading is complete -->
</USkeleton>
Accessibility
The skeleton includes proper ARIA attributes:
aria-busy="true" - Indicates loading statearia-label="loading" - Screen reader labelaria-live="polite" - Announces changes politelyrole="alert" - Identifies as an alert region
Examples
Text Skeleton
<template>
<div class="space-y-2">
<USkeleton class="h-4 w-full" />
<USkeleton class="h-4 w-5/6" />
<USkeleton class="h-4 w-4/6" />
</div>
</template>
Avatar Skeleton
<template>
<USkeleton class="size-12 rounded-full" />
</template>
Card Skeleton
<template>
<div class="p-4 border border-default rounded-lg">
<div class="flex items-center gap-4">
<USkeleton class="size-12 rounded-full" />
<div class="flex-1 space-y-2">
<USkeleton class="h-4 w-1/2" />
<USkeleton class="h-3 w-3/4" />
</div>
</div>
<div class="mt-4 space-y-2">
<USkeleton class="h-4 w-full" />
<USkeleton class="h-4 w-full" />
<USkeleton class="h-4 w-2/3" />
</div>
</div>
</template>
Conditional Loading
<script setup>
const { data, pending } = await useFetch('/api/users')
</script>
<template>
<div>
<USkeleton v-if="pending" class="h-20 w-full" />
<div v-else>
{{ data }}
</div>
</div>
</template>
List Skeleton
<template>
<div class="space-y-4">
<div v-for="i in 3" :key="i" class="flex items-center gap-3">
<USkeleton class="size-10 rounded-full" />
<div class="flex-1 space-y-2">
<USkeleton class="h-4 w-1/3" />
<USkeleton class="h-3 w-1/2" />
</div>
</div>
</div>
</template>
Image Skeleton
<template>
<USkeleton class="h-48 w-full rounded-lg" />
</template>
Table Skeleton
<template>
<div class="space-y-3">
<div v-for="i in 5" :key="i" class="flex gap-4">
<USkeleton class="h-8 w-1/4" />
<USkeleton class="h-8 w-1/3" />
<USkeleton class="h-8 w-1/6" />
<USkeleton class="h-8 w-1/4" />
</div>
</div>
</template>
With Custom Animation
<template>
<USkeleton
class="h-4 w-full"
:ui="{ base: 'animate-pulse bg-gradient-to-r from-elevated via-accented to-elevated bg-[length:200%_100%]' }"
/>
</template>