Rainbow Border

Animated rainbow gradient border effect — the exact same animation used in the Button rainbow effect. Drop <RainbowBorder /> inside any Card and apply rainbowCardClasses to the Card.

Installation

npx shadcn@latest add https://prismaui.com/components/rainbow-border.json

Import


import {
  RainbowBorder,
  rainbowCardClasses,
} from '@/components/ui/rainbow-border';
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from '@/components/ui/card';
import { cn } from '@/lib/utils';

Preview

Rainbow Card

Animated rainbow gradient border.

Same rainbow effect as the Button component.


import {
  RainbowBorder,
  rainbowCardClasses,
} from '@/components/ui/rainbow-border';
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from '@/components/ui/card';
import { cn } from '@/lib/utils';
 
<Card className={cn('relative w-[320px]', rainbowCardClasses)}>
  <RainbowBorder />
  <CardHeader>
    <CardTitle>Rainbow Card</CardTitle>
    <CardDescription className='text-primary-foreground/70'>
      Animated rainbow gradient border.
    </CardDescription>
  </CardHeader>
  <CardContent>
    <p className='text-sm text-primary-foreground/70'>
      Same rainbow effect as the Button component.
    </p>
  </CardContent>
</Card>;

How it works

rainbowCardClasses is a string of Tailwind classes that apply the rainbow gradient to the Card’s background/border.
<RainbowBorder /> renders the decorative blurred glow beneath the card.
The card body adapts to themes automatically (dark body in light mode, light body in dark mode).

API

`rainbowCardClasses`

A constant string of Tailwind classes. Apply it to the Card’s className alongside relative.

`<RainbowBorder />`

A zero-prop decorative element. Drop it as a child of the Card.