🌊 liquid-glass-ui

Liquid Glass UI is a lightweight React component library that provides elegant glassmorphism (frosted glass) UI components using pure CSS, built to work seamlessly with React + Vite. No Tailwind. No external animation libraries. Just clean, modern UI.

✨ Features

• 🧊 Pure glassmorphism effect using plain CSS
• ⚛️ Built for React (Vite compatible)
• 🎨 Easily customizable with inline styles
• 💡 Perfect for cards, modals, and UI blocks

📦 Installation

npm install use-liquid-glass-ui

or

yarn add use-liquid-glass-ui

🚀 Usage

import { GlassCard } from 'use-liquid-glass-ui'

function App() {
  return (
    <div style={{ padding: '40px' }}>
      <GlassCard style={{ width: '300px', height: '200px' }}>
        <h2>Hello, Glass World!</h2>
        <p>This is a frosted glass card.</p>
      </GlassCard>
    </div>
  )
}

🎛️ Props

<GlassCard />

| Prop | Type | Default | Description | |-----------|------------------------|---------|--------------------------------------| | children| React.ReactNode | – | Content inside the glass card | | style | React.CSSProperties | {} | Inline styles to customize the card |

🧪 Preview

Here's what a GlassCard looks like:

🛠 Roadmap

• [x] Basic glass card
• [ ] Glass buttons
• [ ] Glass modal component
• [ ] Customization via props (blur, transparency, color)
• [ ] Dark mode support

💻 Local Development (for contributors)

1. Clone the repo:

   git clone https://github.com/tejasdhodi/liquid-glass-ui.git
   cd liquid-glass-ui

2. Install dependencies:

   npm install

3. Build the library:

   npm run build

4. Link for local testing:

   npm link
   # Then inside another React project:
   npm link liquid-glass-ui

🤝 Contributing

Contributions are welcome! Here's how you can help:

• ⭐ Star the repo
• 📥 Open issues for bugs or ideas
• 📢 Submit a pull request for new components or enhancements

Guidelines

• Use plain CSS — no utility frameworks
• Stick to consistent class naming (glass-*)
• Keep components minimal and reusable

📄 License

This project is licensed under the MIT License.

🌐 Links

• 📦 NPM: https://www.npmjs.com/package/use-liquid-glass-ui
• 🛠 GitHub: https://github.com/TejasDhodi/liquid-glass-ui

Made with ❤️ by Tejas Dhodi