║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Glowing Border Card description: A customizable card with a glowing border effect that changes colors based on light and dark modes.

<ComponentPreview name="glowingbordercard-demo" description="A card with a glowing border that changes colors in light and dark modes." />

Installation

<Tabs defaultValue="cli" className="w-full"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <PkgOptions name="glowingbordercard" /> </TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<p> <code>glowingbordercard.tsx</code> </p> <ComponentSource name="glowingbordercard" />

<Step>Add util file</Step>

<p> <code>lib/utils.ts</code> </p>

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

</Steps> </TabsContent> </Tabs>

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

<PropsTable rows={[ { prop: "className", type: "string", default: "—", description: "Optional class name for custom styling." }, { prop: "children", type: "ReactNode", default: "—", description: "Optional content to render inside." }, { prop: "fromColor", type: "string", default: "required", description: "Starting gradient color (e.g., 'red-500')." }, { prop: "toColor", type: "string", default: "required", description: "Ending gradient color (e.g., 'blue-500')." } ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║