Glass Shimmer Button

A premium glassmorphism button with continuous shimmer animation and hover effects.

Installation

Run the following command to install the component:

npx rareui add glass-shimmer-button

This will install the component to components/rareui/ directory.

Usage

import { GlassShimmerButton } from '@/components/rareui/glass-shimmer-button';

export default function App() {
  return (
    <GlassShimmerButton onClick={() => alert('Clicked!')}>
      Click Me
    </GlassShimmerButton>
  );
}

Features

  • Continuous Shimmer Animation: Self-contained animated shimmer effect that runs continuously
  • Glassmorphism Design: Premium frosted glass aesthetic with backdrop blur
  • Hover Effects: Scale animation and enhanced glow on hover
  • Dark Mode Support: Optimized colors for both light and dark themes
  • Fully Self-Contained: No global CSS required - animations defined inline

Props

Extends all standard React.ButtonHTMLAttributes<HTMLButtonElement>.

PropTypeDefaultDescription
childrenReact.ReactNode-The content to display inside the button.
classNamestring-Additional CSS classes to merge with default styles.
...propsButtonHTMLAttributes-Any additional HTML button attributes (onClick, disabled, etc.).
Previous
Next