React Shimmer Effect

RSE

React Shimmer Category Item Component - Light, Dark & Custom Modes

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

Shimmer Category Item Light Mode

<ShimmerCategoryItems mode="light" />

<ShimmerCategoryItems mode="light" imageRounded={50} />

Shimmer Category Item Dark Mode

<ShimmerCategoryItems mode="dark" />

<ShimmerCategoryItems mode="dark" imageRounded={50} />

Shimmer Category Item Custom Mode

<ShimmerCategoryItems mode="custom" from="#7c3aed" via="#8b5cf6" to="#7c3aed" />

<ShimmerCategoryItems mode="custom" imageRounded={50} from="#7c3aed" via="#8b5cf6" to="#7c3aed" />

Shimmer Category Item Loading Mode

<ShimmerCategoryItems mode='light' loading={loading} >
  <div style={{ display: "flex" }}>
    <img style={{ height: "100px", width: "100px" }} src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?cs=srgb&dl=pexels-pixabay-33109.jpg&fm=jpg" />
    <div style={{ paddingInline: "1em" }}>
      <p>Title</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque ipsam voluptatibus numquam hic cum maiores rerum dolor repudiandae, soluta quas, sequi nemo sunt unde voluptates! Hic consequuntur molestiae nemo eligendi.</p>
      <button style={{ backgroundColor: "gray", paddingInline: "20px", color: "white" }}>click</button>
    </div>
  </div>
</ShimmerCategoryItems>

<ShimmerCategoryItems mode='light' loading={loading} >
  <div style={{ display: "flex" }}>
    <img style={{ height: "100px", width: "100px", borderRadius: "50%" }} src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?cs=srgb&dl=pexels-pixabay-33109.jpg&fm=jpg" />
    <div style={{ paddingInline: "1em" }}>
      <p>Title</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque ipsam voluptatibus numquam hic cum maiores rerum dolor repudiandae, soluta quas, sequi nemo sunt unde voluptates! Hic consequuntur molestiae nemo eligendi.</p>
      <button style={{ backgroundColor: "gray", paddingInline: "20px", color: "white" }}>click</button>
    </div>
  </div>
</ShimmerCategoryItems>

Properties

Property	Type	Required	Default value	Description
items	number	No	1	Number of items.
itemGap	number	No	30px	The gap between the two items.
imageHeight	number \| string	No	100px	The height of the image.
imageWidth	number \| string	No	100px	The width of the image.
imageRounded	number	No	0em	The border radius of the image.
hasTitle	boolean	No	true	Whether the category item has a title.
hasText	boolean	No	true	Whether the category item has text content.
hasButton	boolean	No	true	Whether the category item has a button.
hasImage	boolean	No	true	Whether the category item has an image.
contentPosition	"start" \| "center" \| "end"	No	start	The position of the content within the category item.
loading	boolean	No	true	Whether the category item is in a loading state.
children	ReactElement	No	-	Element to load after loading false
mode	"light" \| "dark" \| "custom"	Yes	-	The mode of the category item (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 Section Header

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

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.

Section Header

Content Block