Rainbow Glow Border
Smooth animated rainbow glow border wrap with drifting color orbs. Put any registry component inside.
5.8 KB
•Updated on October 7, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-rainbow-glow-borderUsage
Code
import { RainbowGlowBorder } from '@/components/spaceui/rainbow-glow-border'
import { Avatar } from '@/components/ui/avatar'
import { AvatarFallback } from '@/components/spaceui/avatar-extended'
;<RainbowGlowBorder className="inline-flex size-14 rounded-full p-0.75">
<Avatar className="size-full">
<AvatarFallback name="rainbow" variant="lumina" />
</Avatar>
</RainbowGlowBorder>rounded-* and p-0.75 on RainbowGlowBorder control the glow ring shape and thickness.
Variants
Button
Card
Presets
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Any registry component |
preset | rainbow|aurora|sunset|neon|cyber|chrome | rainbow | Built-in animated palette presets |
orbs | OrbConfig[] | — | Custom array of orb colors and trajectories (overrides preset) |
innerClassName | string | — | Class names for the relative content wrapper |
blur | number | 6 | Gaussian blur radius applied to drifting orbs in pixels |
duration | number | 3 | Loop duration in seconds for each cycle |
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.
