Glowing Border Card

A customizable card with a glowing border effect that changes colors based on light and dark modes.

Installation

npx scrollx-ui@latest add glowingbordercard

Usage

import GlowingBorderCard from "@/components/ui/glowingbordercard";

<GlowingBorderCard
  title="Glowing Border Card"
  description="Hover over this card to see the glowing border effect"
  fromColor="pink-600"
  toColor="purple-600"
/>

API Reference

GlowingBorderCard

The GlowingBorderCard component is used to create a customizable card with a glowing border effect that changes colors based on light and dark modes. The card can display a title and description, and it also supports animation and hover effects.

Props

• title ( string ) – The title text displayed inside the card.
• description ( string ) – The description text displayed inside the card.
• fromColor ( string ) – The starting color of the gradient in light mode. Accepts Tailwind CSS color names (e.g., red-500 , green-500 , etc.).
• toColor ( string ) – The ending color of the gradient in light mode. Accepts Tailwind CSS color names (e.g., blue-500 , teal-500 , etc.).