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  className="w-80 h-72" fromColor="purple-600" toColor="purple-600">
  <div className="w-full h-full flex flex-col items-center justify-center text-center">
      <h3 className="text-xl font-semibold mb-1">GlowingBorder Card</h3> 
        <p className="text-sm text-muted-foreground">
          Hover to see the glowing border effect. 
        </p>
    </div>
</GlowingBorderCard>

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

• className - Optional class name for custom styling
• children - Optional custom content
• 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.).