9.7k

Skeleton

PreviousNext

Use to show a placeholder while content is loading.

<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import { VSkeleton } from '@ui-kit/src/components/Base/VSkeleton'
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-3">
    <VSkeleton height="18px" width="35%" />
    <VSkeleton height="16px" width="100%" />
    <VSkeleton height="16px" width="82%" />
    <div class="flex items-center gap-3 pt-2">
      <VSkeleton width="44px" height="44px" radius="999px" />
      <div class="flex flex-1 flex-col gap-2">
        <VSkeleton height="14px" width="50%" />
        <VSkeleton height="14px" width="75%" />
      </div>
    </div>
  </div>
</template>

Installation

pnpm dlx shadcn-vue@latest add skeleton

Usage

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

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