react-glass-card

A beautiful, highly customizable glassmorphism card component for React and Next.js applications. Features Tailwind CSS integration, dark mode support, and smooth hover animations out of the box.

Installation

npm install react-glass-card

Quick Start

Import the component and its stylesheet into your React or Next.js application:

import { GlassCard } from 'react-glass-card';
import 'react-glass-card/styles.css';

export default function App() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-indigo-500 to-purple-600 p-20">
      <GlassCard blur="lg" hoverEffect={true}>
        <h2 className="text-2xl font-bold text-white mb-4">Glassmorphism</h2>
        <p className="text-white/80">
          This card features a frosted glass effect with a subtle border and shadow, perfect for modern UI designs.
        </p>
      </GlassCard>
    </div>
  );
}

Props API

| Prop | Type | Default | Description | |------|------|---------|-------------| | blur | 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' | 'md' | The intensity of the background blur. | | hoverEffect | boolean | true | Enables a lifting hover animation with increased shadow. | | className | string | '' | Additional Tailwind classes to apply to the card. | | children | ReactNode | null | The content inside the card. |

Why use react-glass-card?

• Zero Configuration: Works exactly as expected out of the box.
• Tailwind V4 Ready: Fully integrated with the latest Tailwind CSS specification.
• Accessible & Responsive: Standard HTMLDivElement props are passed through.
• Dark Mode Support: Seamlessly transitions when your app switches to dark mode.

License

MIT © Mohammed Riyan