Skip to main content

​
Usage

The Shimmer Button adds an elegant shimmering animation that creates a light reflection effect across the button surface. Perfect for premium or highlighted call-to-action buttons. 
<ShimmerButton>
  Click Me
</ShimmerButton>

​
Props

Prop NameTypeDefaultDescription
classstring""Additional CSS classes to apply to the button.
shimmerColorstring"#ffffff"Color of the shimmer effect.
shimmerSizestring"0.05em"Size of the shimmer effect.
borderRadiusstring"100px"Border radius of the button.
shimmerDurationstring"3s"Duration of the shimmer animation.
backgroundstring"rgba(0, 0, 0, 1)"Background color of the button. Can be rgb or hex code.

​
Examples

​
Basic Usage

<ShimmerButton>
  Shimmer Effect
</ShimmerButton>

​
Custom Shimmer Color

<ShimmerButton shimmerColor="#FFD700">
  Gold Shimmer
</ShimmerButton>

​
Custom Background

<ShimmerButton background="#1a1a1a">
  Dark Background
</ShimmerButton>

​
Custom Animation Duration

<ShimmerButton shimmerDuration="5s">
  Slow Shimmer
</ShimmerButton>

​
Fully Customized

<ShimmerButton
  shimmerColor="#00ffff"
  shimmerSize="0.1em"
  borderRadius="12px"
  shimmerDuration="2s"
  background="#0a0a0a"
  class="px-8 py-4 text-lg font-semibold"
>
  Premium Button
</ShimmerButton>

​
Square Button

<ShimmerButton borderRadius="8px">
  Square Shimmer
</ShimmerButton>

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us