Skeleton

Vue skeleton placeholder that reserves layout space while content or data is loading.

Show code

Features

Shimmer — Light sweep from left to right while content loads
Shape with classes — Size and shape via Tailwind utilities (rounded-full, fixed width/height)
Customizable — Override styles with the class prop

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/skeleton.json

      
      npx shadcn-vue@latest add https://vuzeno.com/r/skeleton.json

      
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/skeleton.json

      
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/skeleton.json

Usage

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

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

Examples

Card

Compose multiple skeletons to match a card layout.

Show code

API

Skeleton

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes

Signature Pad Slider