A reusable and customizable glow card effect component built with shadcn, Tailwind CSS, and React. This component allows you to create stunning glowing cards by wrapping your content in a GlowArea and Glow component.

• Reusable Components: Use GlowArea and Glow to create glowing cards effortlessly.
• Customizable Glow Effect: Adjust the glow color, size, and position dynamically.
• Built with Tailwind CSS: Leverage the power of utility-first CSS for rapid development.
• Powered by shadcn: Use shadcn's pre-built components for consistent and accessible UI.

1. Clone the repository:

   git clone https://github.com/callmedeci/Glow-Card-Effect.git

2. Navigate to the project directory:

   cd glow-cards

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Open your browser and visit http://localhost:5173 to view the project.

import { GlowArea, Glow } from './components/Glow';
import { Card, CardHeader, CardTitle, CardContent, CardDescription, CardFooter } from './components/ui/card';
import { Button } from './components/ui/button';

<GlowArea className="flex gap-5">
  <Glow color="var(--color-rose-800)" className="rounded-xl">
    <Card className="max-w-lg">
      // other components
    </Card>
  </Glow>
</GlowArea>

The GlowArea component is the container for all Glow components. It ensures the glow effects are properly positioned and animated.

GlowArea({ className, size = 300, children, ...props })

The Glow component wraps your content and applies the glow effect.

Glow({ color, className, children, ...props })

This project uses the following libraries:

• shadcn: For pre-built, accessible UI components.
• Tailwind CSS: For utility-first CSS styling.
• tailwindcss-animate: For smooth animations.
• Lucide React: For beautiful icons.
• Radix UI: For primitives like Slot.

• shadcn for providing an amazing UI component library.
• Tailwind CSS for making styling a breeze.
• Vite for the fast development experience.

Enjoy using the Glow Cards component!