🦴 Skeleton UI Components

A customizable set of Skeleton components for React — great for building smooth loading placeholders for images, paragraphs, and general UI blocks.

---

🔧 Components

Skeleton

The base skeleton block. Handles layout, shape, and optional image placeholders.

Props

Prop	Type	Description
width	string | number	Width of the skeleton. Defaults to '100%'.
height	string | number	Height of the skeleton. Defaults to '1rem'.
circle	boolean	Makes the skeleton circular.
borderRadius	string | number	Border radius for the skeleton (ignored if circle is true).
placeholder	boolean | string	If true, uses default placeholder image (/Images/loader.gif). Or pass a URL.
opacity	number | string	Opacity value between 0 and 1 or as a string percentage.

---

SkeletonImage

Image-specific skeleton wrapper. Supports circular or rectangular shapes.

Props

Inherits from Skeleton, plus:

Prop	Type	Description
size	number	Sets both width and height. Ignored if width or height is provided.
circle	boolean	Defaults to true if size is passed.

---

SkeletonParagraph

Multi-line skeleton block for simulating paragraph/text content.

Props

Prop	Type	Description
rows	number	Number of lines. Default is 3.
widths	(string | number)[]	Optional array of widths for each line.
lineHeight	string | number	Height of each line. Default is '1rem'.
spacing	string | number	Space between lines. Default is '0.5rem'.
placeholder	boolean | string	Uses image placeholder if true or string path provided.
borderRadius	string | number	Radius for each line.
opacity	number | string	Line opacity.

---

SkeletonClientWrapper

Client-side wrapper that shows skeletons during a simulated loading state.

Props

Prop	Type	Description
loadertime	number	Duration in milliseconds to show skeleton. Default: 5000.
type	'Image' | 'Paragraph'	Determines which component (SkeletonImage, SkeletonParagraph) to show.

Inherits all props from Skeleton, SkeletonImage, or SkeletonParagraph depending on type.

---

🪄 useSkeleton Hook

Simple loading hook that returns true for a specified time:

1const loading = useSkeleton(3000); // true for 3 seconds
2
3🖼 Placeholder Image
4If using placeholder, ensure the image file is in /public/Images/loader.gif. You can override with a custom image path:
5
6
7<Skeleton placeholder /> // uses default
8<Skeleton placeholder="/Images/my-spinner.gif" /> // custom
9📦 Example Usage
10
11<SkeletonClientWrapper
12  type="Image"
13  size={80}
14  circle
15  placeholder
16  loadertime={3000}
17/>
18
19<SkeletonClientWrapper
20  type="Paragraph"
21  rows={4}
22  widths={['80%', '90%', '100%', '70%']}
23  placeholder
24  spacing="1rem"
25/>