Skeleton
Animated skeleton placeholder component for loading content.
Install
pnpm dlx shadcn@latest add https://www.katestroyui.com/r/skeleton
Usage
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) | - |