Skip to main content

​
Usage

Use the USkeleton component to show loading placeholders while content is being fetched. 
<template>
  <USkeleton class="h-4 w-full" />
</template>

​
Props

​
as

  • Type: any
  • Default: 'div'
The element or component this component should render as. 
<USkeleton as="span" class="h-4 w-20" />

​
class

  • Type: any
Additional CSS classes to apply to the skeleton. Use this to control the size and shape. 
<USkeleton class="h-12 w-12 rounded-full" />

​
ui

  • Type: { base?: any }
Customize the component’s styling.
  • 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 state
  • aria-label="loading" - Screen reader label
  • aria-live="polite" - Announces changes politely
  • role="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>

Build docs developers (and LLMs) love

Get started for freeTalk to us