Skeleton
Animated skeleton placeholder component for loading content.
Install
pnpm dlx shadcn@latest add https://www.katestroyui.com/r/skeletonUsage
1import { Skeleton } from "@/components/ui/skeleton";2import React from "react";34export function Example() {5 return (6 <div className="flex flex-col gap-4 w-64">7 <Skeleton className="h-8 w-full" />8 <Skeleton className="h-4 w-1/2" />9 <div className="flex items-center gap-4 mt-4">10 <Skeleton className="h-10 w-10 rounded-full" />11 <div className="flex-1 space-y-2">12 <Skeleton className="h-4 w-3/4" />13 <Skeleton className="h-4 w-1/2" />14 </div>15 </div>16 </div>17 );18}
Props
| Prop | Type | Description | Default | 
|---|---|---|---|
| className | string | Extra CSS classes | - | 
| style | React.CSSProperties | Inline style | - | 
| children | React.ReactNode | Content (usually left empty) | - |