Skeleton
Use to show a placeholder while content is loading.
Installation
npm i Usage
1
2
3
4
5
import { Skeleton } from "@/components/ui/skeleton"
export function SkeletonDemo() {
return <Skeleton className="h-[20px] w-[100px]" />
}Examples
Different Shapes
Circle
Line
Rounded Rectangle
Card Example
Avatar with Text Example
Props
| Component | Props | Description |
|---|---|---|
| Skeleton | React.HTMLAttributes | A component that renders a placeholder skeleton while content is loading. |
| className | string | Optional CSS class to adjust width, height, and shape of the skeleton. |