⚠️ Mobile is not supported yet.

Command Palette

Search for a command to run...

[Explore]
[Search]
[Saved]

Terms of Service Privacy Policy

Rainbow Button – shadcn/ui Component by motokoui | shadcnregistry

Registries
motokoui
Rainbow Button

Rainbow Button

ui

A black (white in dark mode) button with an animated rainbow border.

Provided by motokoui

Open in https://v0.dev/Open in

@radix-ui/react-slot
class-variance-authority

Installation

Install directly from the provider.

pnpm dlx shadcn@latest add "https://www.motokoui.com/r/rainbow-button.json"

Files

Styles

Light Mode

--rainbow-1:

hsl(0 100% 63%)

--rainbow-2:

hsl(270 100% 63%)

--rainbow-3:

hsl(210 100% 63%)

--rainbow-4:

hsl(195 100% 63%)

--rainbow-5:

hsl(90 100% 63%)

--rainbow-speed:

2s

Dark Mode

--rainbow-1:

hsl(0 100% 63%)

--rainbow-2:

hsl(270 100% 63%)

--rainbow-3:

hsl(210 100% 63%)

--rainbow-4:

hsl(195 100% 63%)

--rainbow-5:

hsl(90 100% 63%)

--rainbow-speed:

2s

Theme

--animate-rainbow:

rainbow var(--rainbow-speed, 2s) infinite linear

CSS