🧊 Hydra Glassium

A premium, highly customizable glassmorphism component library for React. Build stunning, modern interfaces with ease using standardized glass effects.

📦 Installation

npm install hydra-glassium

🚀 Quick Start

import React from "react";
import { Card, Button, Input } from "hydra-glassium";

function App() {
  return (
    <Card 
      glassColor="rgba(20, 184, 166, 0.2)" 
      thickness={3} 
      blur={15}
      radius={20}
      padding="30px"
    >
      <h2>Modern Glass UI ✨</h2>
      <Input placeholder="Enter your name" variant="filled" />
      <Button variant="filled" style={{ marginTop: '15px' }}>
        Get Started
      </Button>
    </Card>
  );
}

🎨 Standardized Glassmorphism Props

All components in the library support a unified set of props to control the glass effect:

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | glassColor | string | rgba(255,255,255,0.2) | The base color of the glass. | | thickness | number | 2 | Controls the shadow depth and intensity. | | blur | number | 10 | Backdrop blur intensity in pixels. | | border | number | 1 | Border width in pixels. | | radius | number | 5 | Corner rounding in pixels (default varies by component). |

🧩 Available Components

Hydra Glassium comes packed with a variety of glass-styled components:

• Layout: Card, Tabs, Accordion
• Inputs: Input, DatePicker, Dropdown, Autocomplete
• Feedback: Alert, Modal, Drawer
• Data Display: Avatar, List, Table
• Navigation: Stepper, Pagination, Button

⚙️ Component Specific Props

Most components also support standard React props like style, className, width, height, padding, and margin.

[!TIP] Mix and match glassColor and thickness to create depth in your UI. Use a higher thickness for floating elements like Modals and Drawers!

Licensed under ISC. Created by Shankar Ravi.