Rainbow Card

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

npm

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

pnpm

pnpm dlx shadcn@latest add https://joaocarmassi.com/components/rainbow-border.json

yarn

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

bun

bunx --bun shadcn@latest add https://joaocarmassi.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.

Action

<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.