React Shimmer Title Component - Light, Dark & Custom Modes
Enhance your web applications with the dynamic Shimmer Title Component, available in light and dark modes with customizable sizes.
Shimmer Title Light Mode
<ShimmerTitle mode="light" line={10} gap={8} />Shimmer Title Dark Mode
<ShimmerTitle mode="dark" line={10} gap={8} />Shimmer Title Custom Mode
<ShimmerTitle mode="custom" line={10} gap={8} from="#7c3aed" via="#8b5cf6" to="#7c3aed" />Shimmer Title Loading Mode
<ShimmerTitle mode="light" line={10} gap={8} loading={loading} >
<p className="text">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>
</ShimmerTitle>Properties
| Property | Type | Required | Default value | Description |
|---|---|---|---|---|
| height | number | No | 16px | The height of the title. |
| width | number | No | 100% | The width of the title. |
| border | number | No | 1px | The border width of the title. |
| rounded | number | No | 1em | The border radius of the title. |
| line | number | Yes | - | The number of lines for the title. |
| gap | number | Yes | 8px | The gap between title elements. |
| loading | boolean | No | true | Whether the title is in a loading state. |
| children | ReactElement | No | - | Element to load after loading false |
| center | boolean | No | false | Whether to center align the title. |
| mode | "light" | "dark" | "custom" | Yes | - | The mode of the title (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 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 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.