React Shimmer Effect

RSE

React Shimmer Text Component - Light, Dark & Custom Modes

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

Shimmer Text Light Mode

<ShimmerText mode="light" line={10} gap={6} />

Shimmer Text Dark Mode

<ShimmerText mode="dark" line={10} gap={6} />

Shimmer Text Custom Mode

<ShimmerText mode="custom" line={10} gap={6} from="#7c3aed" via="#8b5cf6" to="#7c3aed" />

Shimmer Text Loading Mode

<ShimmerText mode="light" line={10} gap={6} loading={loading} >
	<p className="text" style={{ fontSize: "10px" }}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente deserunt adipisci dolores similique accusantium, provident nam iste culpa accusamus sed ex a incidunt, rem eligendi. Qui quo at maiores necessitatibus. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt dignissimos dolor maiores quam molestiae repellat veniam hic Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus accusantium quas expedita odit tenetur voluptatibus quibusdam quisquam hic, minus deleniti consequuntur ex dolor ipsum recusandae velit non, nam tempore magnam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis exercitationem, non sequi suscipit tenetur voluptate dignissimos asperiores quaerat, aperiam sapiente consectetur esse velit a rem nulla iusto quas molestias quis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi ab, provident, modi corporis repellendus accusamus culpa nemo ipsam distinctio error mollitia atque quae est, tempore minima consequuntur. Error, iure itaque. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro doloribus praesentium at voluptas delectus quasi dolore voluptatibus dolorem eligendi minima, iste fugiat laudantium aspernatur ullam earum placeat repellat perspiciatis. Accusantium? Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum temporibus repellat doloribus incidunt nam autem odit porro sequi alias cumque. Illo alias laborum at aliquid voluptatum accusamus, nobis atque eveniet!</p>
</ShimmerText>

Properties

Property	Type	Required	Default value	Description
height	number	No	8px	The height of the text.
width	number	No	100%	The width of the text.
border	number	No	1px	The border width of the text.
rounded	number	No	1em	The border radius of the text.
line	number	Yes	-	The number of lines for the text.
gap	number	Yes	6px	The gap between text elements.
loading	boolean	No	true	Whether the text is in a loading state.
children	ReactElement	No	-	Element to load after loading false
center	boolean	No	false	Whether to center align the text.
mode	"light" \| "dark" \| "custom"	Yes	-	The mode of the text (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 Section Header

Give section headers a shimmering loading effect with this React component.

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.

Title

Section Header