Rainbow Button
A button with a flowing rainbow gradient animation, in solid and outline styles, with a soft glow in matching hues.
A button whose rainbow gradient keeps flowing horizontally, with solid and outline styles built in plus an adjustable flow speed and a matching-hue glow.
Loading preview…
npx shadcn@latest add https://webberui.com/r/rainbow-button.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
3
<RainbowButton />
Installation
npx shadcn@latest add https://webberui.com/r/rainbow-button.jsonOr, once registries are configured in components.json, install it as @webberui/rainbow-button.
Usage
import { RainbowButton } from "@/components/ui/rainbow-button";
<RainbowButton>Get Started</RainbowButton>
<RainbowButton variant="outline">Outline</RainbowButton>Custom color ramp and flow speed:
<RainbowButton
colors={["#ff4d4d", "#4dd2ff", "#c14dff"]}
speed={1.5}
>
Custom
</RainbowButton>RainbowButton forwards all native <button> attributes (onClick, disabled, type, and so on).
Props
| Prop | Type | Default | Description |
|---|---|---|---|
colors | string[] | the seven rainbow colors | The rainbow color ramp; the end loops back to the first color to close the ring, minimum two colors |
speed | number | 3 | Duration of one flow cycle (seconds); smaller is faster |
variant | "solid" | "outline" | "solid" | solid fills with the gradient; outline shows the rainbow only on the border and the glow |
glow | boolean | true | Whether to layer a soft glow in matching hues underneath |
className | string | — | Styles forwarded to the root button |
All native button attributes are supported as well.
Accessibility
- When the user has "reduce motion" enabled at the system level, the gradient flow pauses at a standstill while the rainbow appearance is kept
- On focus it provides a clear
focus-visibleoutline ring, keeping keyboard operation visible - Rendering is identical before and after mounting, avoiding an SSR hydration mismatch