This component no longer exists. It was in Svelte Animations’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-05 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.
Rainbow Button
svelte-animations/rainbow-buttonRemovedBlock
A button component with animated rainbow gradient borders and background that cycles through multiple colors.
Install it
npx shadcn@latest add https://sv-animations.vercel.app/r/rainbow-button.jsonSource
1<script lang="ts" module>2 export const buttonVariants = tv({3 base: cn(4 "group animate-rainbow relative cursor-pointer transition-all",5 "inline-flex shrink-0 items-center justify-center gap-2",6 "aria-invalid:border-destructive rounded-sm outline-none focus-visible:ring-[3px]",7 "text-sm font-medium whitespace-nowrap",8 "disabled:pointer-events-none disabled:opacity-50",9 "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"10 ),11 variants: {12 variant: {13 default:14 "text-primary-foreground before:animate-rainbow border-0 bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] bg-[length:200%] [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.125rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:bg-[linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] before:[filter:blur(0.75rem)] dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))]",15 outline:16 "border-input text-accent-foreground before:animate-rainbow border border-b-transparent bg-[linear-gradient(#ffffff,#ffffff),linear-gradient(#ffffff_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] bg-[length:200%] [background-clip:padding-box,border-box,border-box] [background-origin:border-box] before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:bg-[linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] before:[filter:blur(0.75rem)] dark:bg-[linear-gradient(#0a0a0a,#0a0a0a),linear-gradient(#0a0a0a_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))]",17 },18 size: {19 default: "h-9 px-4 py-2",20 sm: "h-8 rounded-xl px-3 text-xs",21 lg: "h-11 rounded-xl px-8",22 icon: "size-9",23 },24 },25 defaultVariants: {26 variant: "default",27 size: "default",28 },29 });30// … truncated
What it pulls in
npm packages
