Shimmer Button

A button with an animated shimmer effect that respects prefers-reduced-motion.

Installation

tsx

npx smi-ui add shimmer-button

Preview

Custom Colors

Usage

tsx

import { ShimmerButton } from "@/components/ui/shimmer-button"

export function Example() {
  return (
    <ShimmerButton
      shimmerColor="rgba(255, 255, 255, 0.3)"
      background="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
    >
      Get Started
    </ShimmerButton>
  )
}

Props

Prop	Type	Default	Description
shimmerColor	string	hsl(var(--primary) / 0.2)	Color of the shimmer effect
shimmerDuration	string	2s	Duration of shimmer animation
background	string	hsl(var(--primary))	Background color or gradient
borderRadius	string	0.5rem	Border radius of the button

Accessibility

The shimmer animation automatically respects the user's prefers-reduced-motion setting. When reduced motion is preferred, the shimmer effect is disabled while maintaining the button's visual appearance.