Skeleton

A glass-morphism placeholder with pulse animation for loading states.

Preview

Installation

npx shadcn@latest add @shadszn/skeleton

Usage

import { Skeleton } from "@/components/ui/skeleton"

export default function Example() {
  return (
    <div className="space-y-3">
      <Skeleton className="h-4 w-[250px]" />
      <Skeleton className="h-4 w-[200px]" />
      <Skeleton className="h-4 w-[150px]" />
    </div>
  )
}

Card Skeleton

<div className="space-y-4">
  <Skeleton className="h-[200px] w-full rounded-2xl" />
  <div className="space-y-2">
    <Skeleton className="h-5 w-[60%]" />
    <Skeleton className="h-4 w-[80%]" />
  </div>
</div>

Avatar Skeleton

<div className="flex items-center gap-3">
  <Skeleton className="h-10 w-10 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[120px]" />
    <Skeleton className="h-3 w-[80px]" />
  </div>
</div>

Props

Prop	Type	Default	Description
className	string	---	Use className to control width, height, and border-radius for different shapes.