Rainbow Glow Button

An interactive dark pill button featuring 6 orbiting colorful blurred orbs and a blur reveal transition on hover.

4.1 KB

•

Updated on September 25, 2026

Installation

Bash

pnpm dlx shadcn@latest add @spaceui/components-spaceui-rainbow-glow-button

pnpm dlx shadcn@latest add @spaceui/components-spaceui-rainbow-glow-button

Usage

Code

import { RainbowGlowButton } from '@/components/spaceui/rainbow-glow-button'

Code

export default function Example() {
  return (
    <RainbowGlowButton as="a" href="https://spaceui.one/pricing" target="_blank">
      Get pro
    </RainbowGlowButton>
  )
}

API Reference

RainbowGlowButton Props

Prop	Type	Default	Description
`as`	button\|a	button	Render as a button or an anchor link.
`href`	string	—	Target link URL when `as="a"`.
`orbs`	OrbConfig[]	DEFAULT_ORBS	Custom array of orb colors and coordinate motion keyframes.
`className`	string	—	Additional CSS class names.
`children`	React.ReactNode	—	Content displayed within the button label.

Keep in mind

MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.

Aurora Glow Button

Like Button

On This Page

Installation Usage API Reference RainbowGlowButton Props Related Components

motion

@usespaceui/squircle

pnpm dlx shadcn@latest add @spaceui/components-spaceui-rainbow-glow-button