Frappe UIFrappe UI

Skeleton ​

A placeholder block that communicates loading content. Render it in place of content while data loads, then swap it for the real element once ready.

Text ​

vue
<script setup lang="ts">
import { Skeleton } from 'frappe-ui'
</script>

<template>
  <div class="space-y-3">
    <Skeleton class="h-5 w-48" />
    <Skeleton class="h-5 w-72" />
    <Skeleton class="h-5 w-60" />
  </div>
</template>

List ​

vue
<script setup lang="ts">
import { Skeleton } from 'frappe-ui'
</script>

<template>
  <div class="w-64 space-y-3">
    <div v-for="i in 4" :key="i" class="flex items-center gap-3">
      <Skeleton class="size-10 rounded-full" />
      <div class="flex-1 space-y-2">
        <Skeleton class="h-4 w-40" />
        <Skeleton class="h-4 w-24" />
      </div>
    </div>
  </div>
</template>

Card ​

vue
<script setup lang="ts">
import { Skeleton } from 'frappe-ui'
</script>

<template>
  <div class="w-64 space-y-4">
    <Skeleton class="h-40 w-full rounded-lg" />
    <Skeleton class="h-5 w-3/5" />
    <Skeleton class="h-4 w-full" />
    <Skeleton class="h-4 w-4/5" />
  </div>
</template>

API Reference ​

Skeleton takes no props. Control its size and shape with utility classes (or inline styles) on the element itself — for example class="h-5 w-48" for a text line or class="size-10 rounded-full" for an avatar.

SidebarSlider