React Shimmer Effect

RSE

React Shimmer Section Header Component - Light, Dark & Custom Modes

Enhance your web applications with the dynamic Shimmer Section Header Component, available in light and dark modes with customizable sizes.

Shimmer Section Header Light Mode

<ShimmerSectionHeader center={true} mode="light" />

<ShimmerSectionHeader center={false} mode="light" />

Shimmer Section Header Dark Mode

<ShimmerSectionHeader center={true} mode="dark" />

<ShimmerSectionHeader center={false} mode="dark" />

Shimmer Section Header Custom Mode

<ShimmerSectionHeader center={true} mode="custom" from="#7c3aed" via="#8b5cf6" to="#7c3aed" />

<ShimmerSectionHeader center={false} mode="custom" from="#7c3aed" via="#8b5cf6" to="#7c3aed" />

Shimmer Section Header Loading Mode

<ShimmerSectionHeader center={true} mode="light" loading={loading} >
	<div style={{ textAlign: "center" }}>
		<p >This is title</p>
		<p style={{ fontSize: "10px" }}>Lorem ipsum, dolor sit amet consectetur adipisicing eli dolor sit amet consectetur adipisicing elit adipisicing</p>
		<p style={{ fontSize: "10px" }}>Lorem ipsum, dolor sit amet consectetur adipisicing elit adipisicing adipisicing elit adipi</p>
		<p style={{ fontSize: "10px" }}>Lorem ipsum, dolor sit amet adipisicing elit adipisicing consectet.</p>
	</div>
</ShimmerSectionHeader>

<ShimmerSectionHeader center={false} mode="light" loading={loading} >
	<div>
		<p>This is title</p>
		<p style={{ fontSize: "10px" }}>Lorem ipsum, dolor sit amet consectetur adipisicing eli dolor sit amet consectetur adipisicing elit adipisicing</p>
		<p style={{ fontSize: "10px" }}>Lorem ipsum, dolor sit amet consectetur adipisicing elit adipisicing adipisicing elit adipi</p>
		<p style={{ fontSize: "10px" }}>Lorem ipsum, dolor sit amet adipisicing elit adipisicing consectet.</p>
	</div>
</ShimmerSectionHeader>

Properties

Property	Type	Required	Default value	Description
titleHeight	number	No	16px	The height of the title.
titleWidth	number[]	No	[40]	The width(%) of the title.
subtitleHeight	number	No	8px	The height of the subtitle.
subtitleWidth	number[]	No	[80, 70, 60]	The width(%) of the subtitle.
titleBorder	number	No	1px	The border width of the title.
subtitleBorder	number	No	1px	The border width of the subtitle.
titleRounded	number	No	1em	The border radius of the title.
subtitleRounded	number	No	1em	The border radius of the subtitle.
titleLine	number	No	1	The number of lines for the title.
subtitleLine	number	No	3	The number of lines for the subtitle.
titleGap	number	Yes	8	The gap between title elements.
subtitleGap	number	Yes	6	The gap between subtitle elements.
center	boolean	No	false	Whether to center align the elements.
loading	boolean	No	true	Whether the section header is in a loading state.
children	ReactElement	No	-	Element to load after loading false
mode	"light" \| "dark" \| "custom"	Yes	-	The mode of the div (light, dark, or custom).
from, via, to	string	Yes (for mode "custom")	-	The colors used in custom mode.

Take it further

Take full advantage of React Shimmer Effect by experimenting with its extensive features and customization options

React Shimmer Button

A React component adding a shimmer effect to buttons for loading states.

React Shimmer Div

Enhance div elements with a shimmering loading animation using this React component.

React Shimmer Title

Apply a stylish shimmer effect to titles while content loads with this React component.

React Shimmer Text

A React component that provides a shimmering effect to text elements during loading.

React Shimmer Category Items

A React component for adding a shimmer effect to category items while loading.

React Shimmer Content Block

Display shimmering placeholders for content blocks during data loading with this React component.

React Shimmer Table

Use this React component to add a shimmer effect to tables while they load.

React Shimmer Bar Chart

Add a loading shimmer effect to bar charts with this customizable React component.

Text

Category Items