Ripple Button Demo

Neon Border Buttons

Neon Border Inputs

Neon Border Cards

Card title

Wrap any panel with NeonBorder for a subtle glowing frame. Adjust the glow color to match your theme.

Glow Border Overlay

Glow border

Absolute overlay that animates a soft gradient ring. Drop it inside any relative container (cards, buttons, inputs).

How to Use

import { RippleButton } from '@/components/ui';

// Basic usage
<RippleButton>
  Click Me
</RippleButton>

// With customization
<RippleButton
  rippleColor="#FF6B6B"
  duration={800}
  className="bg-blue-500 text-white"
>
  Custom Ripple
</RippleButton>

// Props:
// - rippleColor: Color of the ripple effect (default: #ADD8E6)
// - duration: Duration of the ripple animation in ms (default: 600)
// - className: Additional CSS classes for custom styling
// - onClick: Click event handler
// - All other button HTML attributes are also supported

// NeonBorder wrapper
// import { NeonBorder } from '@/components/ui';
// import { Button } from '@/components/ui/button';
//
// <NeonBorder animationType="full" glowColor="#00BFFF">
//   <Button className="bg-white text-slate-900 rounded-xl">
//     Full border animation
//   </Button>
// </NeonBorder>
//
// animationType: 'none' | 'half' | 'full' (default: 'half')
// glowColor: any CSS color string (default: #00BFFF)
// radius: border radius in px (default: 14)
//
// NeonBorder + Input
// import { Input } from '@/components/ui/input';
// <NeonBorder animationType="full">
//   <Input placeholder="Full border animation" />
// </NeonBorder>
//
// GlowBorder overlay
// import { GlowBorder } from '@/components/ui';
// <div className="relative overflow-hidden rounded-2xl bg-white p-6">
//   <GlowBorder color={['#00BFFF', '#7dd3fc', '#c084fc']} />
//   ...content...
// </div>