Skeleton

Placeholder loading shapes with shimmer, pulse, or static animations.

Import

import { Skeleton } from "@igorao79/uivix";

Playground

Variant

Animation

Card Skeleton

Usage

{/* Card skeleton */}
<div className="flex items-center gap-3">
  <Skeleton variant="circle" width={48} height={48} />
  <div className="space-y-2">
    <Skeleton variant="text" width="40%" />
    <Skeleton variant="text" width="25%" />
  </div>
</div>
<Skeleton variant="rectangle" width="100%" height={120} />

Props

Prop	Type	Default	Description
variant	"rectangle" \| "circle" \| "text"	"rectangle"	Shape of the skeleton
animation	"pulse" \| "shimmer" \| "none"	"shimmer"	Animation style
width	string \| number	"100%" (circle: 40)	Width of the skeleton
height	string \| number	20 (circle: 40, text: 16)	Height of the skeleton
className	string	-	Additional CSS classes