Skip to content

Skeleton

Loading placeholder.

Import

ts
import { Skeleton } from '@heroui-vue/vue'

Usage

<template>
  <div class="grid w-full max-w-sm gap-3">
    <Skeleton class="h-5 w-3/5" />
    <Skeleton class="h-24 w-full rounded-2xl" />
    <div class="flex gap-3">
      <Skeleton class="size-10 rounded-full" />
      <div class="grid flex-1 gap-2">
        <Skeleton class="h-4 w-full" />
        <Skeleton class="h-4 w-2/3" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { Skeleton } from '@heroui-vue/vue'
</script>

API

PropTypeDefaultDescription
animationType'shimmer' | 'pulse' | 'none''shimmer'Placeholder animation

Released under the Apache-2.0 License.