Glowing Border Card

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

Installation

npx shadcn@latest add @scrollxui/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

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