React Shimmer Content Block Component - Light, Dark & Custom Modes
Enhance your web applications with the dynamic Shimmer Content Block Component, available in light and dark modes with customizable sizes.
Shimmer Content Block Light Mode
<ShimmerContentBlock mode="light" rounded={1} items={1} itemsGap={20} thumbnailHeight={300} thumbnailWidth={300} thumbnailRounded={1} contentDetailsPosition="start" contentDetailTextLines={8} />
Shimmer Content Block Dark Mode
<ShimmerContentBlock mode="dark" rounded={1} items={1} itemsGap={20} thumbnailHeight={300} thumbnailWidth={300} thumbnailRounded={1} contentDetailsPosition="start" contentDetailTextLines={8} />
Shimmer Content Block Custom Mode
<ShimmerContentBlock mode="custom" rounded={1} items={1} itemsGap={20} thumbnailHeight={300} thumbnailWidth={300} thumbnailRounded={1} contentDetailsPosition="start" contentDetailTextLines={8} from="#7c3aed" via="#8b5cf6" to="#7c3aed" />
Shimmer Content Block Loading Mode
<ShimmerContentBlock mode="light" loading={loading} rounded={1} items={1} itemsGap={20} thumbnailHeight={300} thumbnailWidth={300} thumbnailRounded={1} contentDetailsPosition="start" contentDetailTextLines={8} />
Properties
| Property | Type | Required | Default value | Description |
|---|---|---|---|---|
| rounded | number | No | 1em | The border radius of the content block. |
| items | number | No | 1 | The number of items in the content block. |
| itemsGap | number | No | 20px | The gap between items in the content block. |
| loading | boolean | No | true | Whether the content block is in a loading state. |
| children | ReactElement | No | - | Element to load after loading false |
| thumbnailHeight | number | No | 200px | The height of the thumbnail in the content block. |
| thumbnailWidth | number | No | 200px | The width of the thumbnail in the content block. |
| thumbnailBorder | number | No | 1 | The border width of the thumbnail. |
| thumbnailRounded | number | No | 1em | The border radius of the thumbnail. |
| contentDetailsPosition | "center" | "start" | "end" | No | start | The position of the content details (e.g., text) within the content block. |
| contentDetailTextLines | number | No | 6 | The number of lines for the content details text. |
| mode | "light" | "dark" | "custom" | Yes | - | The mode of the content block (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 Category Items
A React component for adding a shimmer effect to category items while loading.
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.
Previous
Category ItemsNext
Table