Glowing Border Card

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

GlowingBorder Card

Hover to see the glowing border effect.

Installation

npx shadcn@latest add https://scrollx-ui.vercel.app/registry/glowingbordercard.json

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

Property	Type	Default	Description
`className`	string	`—`	Optional class name for custom styling.
`children`	ReactNode	`—`	Optional content to render inside.
`fromColor`	string	`required`	Starting gradient color (e.g., 'red-500').
`toColor`	string	`required`	Ending gradient color (e.g., 'blue-500').