Rainbow button

Free · MIT

Button with a seamlessly flowing rainbow border and a soft colored glow underneath, tuned to invert cleanly between light and dark themes.

Markdown Open in v0

Open in v0

Installation

$ npx shadcn@latest add https://goodui.dev/r/rainbow-button.json

The file lands in components/goodui/rainbow-button.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/rainbow-button works too.

Usage

import { ArrowRight } from "lucide-react"
import { RainbowButton } from "@/components/goodui/rainbow-button"

export function LaunchCta({ onStart }: { onStart: () => void }) {
  return (
    <RainbowButton size="lg" pill onClick={onStart}>
      Try the AI receptionist
      <ArrowRight className="rtl:rotate-180" />
    </RainbowButton>
  )
}

When to use

Use it for

The single hero call to action on a landing page, especially for AI or creative products.
Launch or announcement moments ("Try the new AI receptionist") where a colorful edge is on brand.
Dark marketing sections, where the glow under the button reads well.

Reach for something else

Everyday app actions (save, filter, invite): use button; a rainbow edge in a form looks out of place.
A subtler moving border that uses two brand colors: use border-beam-button.
A gradient face without the moving border: button with variant="gradient" is simpler.

If you need	Use
Maximum contrast, inverts with the theme	variant="solid" (black face in light, white in dark)
Quieter, page-colored face	variant="outline"
Brand colors instead of the rainbow	colors={[...5 CSS colors]}
Calmer flow	speed={6}
Pill CTA	pill

Examples

Outline variant with brand colors

<RainbowButton
  variant="outline"
  colors={["var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)"]}
  speed={5}
>
  Join the beta
</RainbowButton>

API reference

Prop	Type	Default
variant "solid" inverts with the theme (black in light, white in dark); "outline" uses the page background.	"solid" \| "outline"	"solid"
size "sm" \| "md" \| "lg": height, padding and corner radius (10, 12 or 14 px).	"sm" \| "md" \| "lg"	"md"
pill Fully rounded ends.	boolean	—
colors Five CSS colors for the flowing gradient.	string[]	DEFAULT_COLORS
speed Seconds per loop.	number	3
borderWidth Border thickness in px.	number	2

Also accepts every <button> attribute.

Enter / Space	Activates the button (native <button>).
Tab	Moves focus; the focus ring is offset from the border so it stays visible.

Renders a native <button>; the gradient border, glow and face are aria-hidden spans with pointer-events: none.
variant="solid" uses text-background on a foreground face, so text color follows the theme in light and dark.
The focus ring has a 2px offset in the page background color, so it does not merge with the colored border.

Motion

The border and the glow share one gradient strip, twice the button width, that slides by half its width in a seamless linear loop every `speed` seconds (3 by default). Only transform is animated.
Hover: the blurred glow under the button brightens and widens slightly over 0.3 s. Press scales to 0.98.
Reduced motion: the gradient stops moving; the colored border and glow stay.

The loop is a CSS transform on two strips; no JavaScript runs while it animates. The glow uses a 14px blur, so keep it to one or two buttons per screen.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

colors takes up to five CSS colors; fewer are repeated to fill five slots.
speed is seconds per loop (higher is slower); borderWidth is in px.
Do not add bg-* classes to change the face: the face is an inner span. Choose variant="solid" or "outline" instead.
Corner radius comes from size (10, 12 or 14 px) or pill; set radius through pill, not rounded-* classes, so border and face stay aligned.
Use one rainbow button per screen; it is a hero accent, not a default button.

FAQ

Does it work in dark mode?

Yes. The solid face inverts with the theme (black in light, white in dark) and the glow is toned down in dark mode.

Can I use my brand colors?

Yes, pass colors with five CSS colors or theme variables such as var(--chart-1).

Border beam button

A short light beam rides around the button's rounded border with CSS offset-path, with a conic fallback and a static gradient for reduced motion.

Shimmer button

A light sweep runs across the button. Pure CSS; the sweep is removed for reduced motion.

Button

One button with ten variants, six tones, seven shadows, ten animations, three shapes and five sizes that all combine, plus loading and icon slots.

Gradient text

Text filled with a slowly drifting multi-stop gradient, with Aurora, Sunset, Ocean and theme palettes tuned separately for light and dark.