shadcn-vue/apps/www/src/content/docs/components/skeleton.md

title	description
Skeleton	Use to show a placeholder while content is loading.

Installation

npx shadcn-vue@latest add skeleton

<template #Manual>

Copy and paste the following code into your project

<script setup lang="ts">
import { cn } from '@/lib/utils'

interface SkeletonProps {
  class?: string
}

const props = defineProps<SkeletonProps>()
</script>

<template>
  <div :class="cn('animate-pulse rounded-md bg-secondary', props.class)" />
</template>

Usage

<script setup lang="ts">
import { Skeleton } from '@/components/ui/skeleton'
</script>

<template>
  <Skeleton class="w-[100px] h-[20px] rounded-full" />
</template>