Skeleton Components

Animated loading placeholders.

---

Skeleton

Base skeleton element.

Props

Prop	Type	Description
className	string	Shape and size classes
style	CSSProperties	Inline styles

Example

<Skeleton className="h-12 w-12 rounded-full" />
<Skeleton className="h-4 w-[200px]" />

---

SkeletonText

Multiple lines of text placeholder.

Props

Prop	Type	Default	Description
lines	number	3	Number of lines
className	string	-	Container class

---

SkeletonCard

Card-shaped skeleton.

Props

Prop	Type	Default	Description
showHeader	boolean	true	Show header skeleton
showFooter	boolean	false	Show footer skeleton
className	string	-	Container class

---

SkeletonTable

Table skeleton.

Props

Prop	Type	Default	Description
rows	number	5	Number of rows
columns	number	4	Number of columns
showHeader	boolean	true	Show header row
className	string	-	Container class

---

SkeletonList

List of skeleton items.

Props

Prop	Type	Default	Description
count	number	3	Number of items
showAvatar	boolean	false	Show avatar placeholder
className	string	-	Container class

See also

• Skeleton (Conceptual)