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";
3
4export 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

PropTypeDescriptionDefault
classNamestringExtra CSS classes-
styleReact.CSSPropertiesInline style-
childrenReact.ReactNodeContent (usually left empty)-