Black Friday Week: 20% off on all Nuxt UI Pro products from Nov 25 to Dec 2!

Components

Skeleton

Display a placeholder while content is loading.

Usage

Use to show a placeholder while content is loading.

<template>
  <div class="flex items-center space-x-4">
    <USkeleton class="h-12 w-12" :ui="{ rounded: 'rounded-full' }" />
    <div class="space-y-2">
      <USkeleton class="h-4 w-[250px]" />
      <USkeleton class="h-4 w-[200px]" />
    </div>
  </div>
</template>

Props

ui
{ base?: string; background?: string; rounded?: string; } & { [key: string]: any; } & { strategy?: Strategy; }
{}
as
string
"div"

Config

{
  base: 'animate-pulse',
  background: 'bg-gray-100 dark:bg-gray-800',
  rounded: 'rounded-md'
}