🧊 HydraLiquidGlass

A beautiful, customizable glassmorphism card component for React — minimal, modern, and reusable.

📦 Installation

npm install hydraliquidglass

🚀 Usage

import React from "react";
import HydraGlassCard from "hydraliquidglass";

function App() {
  return (
    <HydraGlassCard
      width="500px"
      height="500px"
      glassColor="red"
      thickness={3}
      border={2}
      blur={15}
      radius={20}
    >
      <h2>Hello Glass ✨</h2>
    </HydraGlassCard>
  );
}

⚙️ Props

| Prop | Type | Default | Description | | ------------ | --------- | ---------------------------- | --------------------------------------------------------------------------- | | width | string | mandatory | Width of the card (e.g., "500px") | | height | string | mandatory | Height of the card (e.g., "500px") | | glassColor | string | "rgba(255, 255, 255, 0.2)" | Base color. Automatically made semi-transparent using color-mix. | | thickness | number | 2 | Shadow depth and intensity (Scale: 1 to 5) | | border | number | 1 | Border thickness (Scale: 1 to 5) | | blur | number | 10 | Backdrop blur intensity (Scale: 1px to 25px) | | radius | number | 16 | Corner rounding (Scale: 1px to 50px) | | children | ReactNode | — | Content inside the card | | className | string | "" | Add custom classes | | style | object | {} | Inline style override/extension |

[!TIP] You no longer need to pass complex RGBA strings for shadows or borders. Just set the glassColor and adjust the numeric scales!