Preview
Variants
Card
List
Avatar + Text
Props
| Prop | Type | Description |
|---|---|---|
| shape | "rect" | "text" | "circle" | "line" | Controls border-radius and default height. "text" and "line" are full-width with fixed small heights; "circle" is fully rounded; "rect" is a rounded rectangle. |
| width | number | string | Explicit width — accepts a pixel number or any CSS value (e.g. "60%", "12rem"). Overrides Tailwind width classes when set. |
| height | number | string | Explicit height. "text" defaults to 0.75 rem and "line" to 0.5 rem when not provided. |
| className | string | Additional Tailwind classes merged onto the skeleton div. |
| ref | React.Ref<HTMLDivElement> | Forwarded ref to the underlying div element. |
Usage
import { Skeleton, SkeletonText } from "@/components/loaders/skeleton";
// Single block
<Skeleton shape="rect" height={120} className="w-full rounded-xl" />
// Avatar circle
<Skeleton shape="circle" width={48} height={48} />
// Multi-line text block (convenience component)
<SkeletonText lines={3} lastWidth="60%" />