Rainbow Button
A vibrant button featuring an animated chromatic rainbow gradient border, dynamic 3D surface reflections, and an ambient blurred rainbow underglow.
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/rainbow-button
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'outline' | 'default' | Visual presentation style of the button surface |
| size | 'default' | 'sm' | 'lg' | 'icon' | 'default' | Button dimension scale and padding |
| asChild | boolean | false | Render as child component (e.g. Next.js Link or a tag) passing through props and styles |
| glow | boolean | true | Whether to show the ambient blurred rainbow glow drop-shadow beneath the button |
| speed | number | 3 | Rainbow animation cycle duration in seconds |
| color1 | string | 'hsl(0 100% 63%)' | First chromatic gradient stop (red/pink) |
| color2 | string | 'hsl(270 100% 63%)' | Second chromatic gradient stop (purple) |
| color3 | string | 'hsl(210 100% 63%)' | Third chromatic gradient stop (blue) |
| color4 | string | 'hsl(195 100% 63%)' | Fourth chromatic gradient stop (cyan) |
| color5 | string | 'hsl(90 100% 63%)' | Fifth chromatic gradient stop (green) |
| className | string | — | Additional CSS classes |