liquid-glass-ui-aryan

v1.0.1

Published

5 months ago

A beautiful liquid glass UI component library

0High
0Medium
0Low

aryanjathar

react ui components glassmorphism liquid-glass design-system

🌊 Liquid Glass UI

A beautiful, modern UI component library featuring glassmorphism effects, prismatic borders, and liquid animations.

✨ Features

🪟 Glassmorphism - Semi-transparent elements with backdrop blur
🌈 Prismatic Effects - Rainbow gradient borders and accents
🌊 Liquid Animations - Smooth transitions and hover effects
📱 Responsive - Works on all device sizes
♿ Accessible - Built with accessibility in mind
🎨 Customizable - Easy to theme and customize

🚀 Integration Methods

Method 1: Copy CSS + Components (Recommended)

Step 1: Add the CSS

Copy liquid-glass.css to your project and import it:

/* In your main CSS file */
@import 'path/to/liquid-glass.css';

/* Or in your React app */
import './liquid-glass.css';

Step 2: Copy Components

Copy the component files you need from src/components/ into your project.

Step 3: Use Components

import { LiquidButton, LiquidCard } from './components/liquid-glass';

function App() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
      <LiquidCard 
        title="Welcome" 
        description="Beautiful liquid glass UI"
        gradient="from-purple-500/20 to-blue-500/20"
      />
      <LiquidButton variant="primary">
        Click Me
      </LiquidButton>
    </div>
  );
}

Method 2: Tailwind CSS Plugin

Create a Tailwind plugin for easy integration:

// tailwind-liquid-glass.js
const plugin = require('tailwindcss/plugin');

module.exports = plugin(function({ addComponents, theme }) {
  addComponents({
    '.liquid-glass': {
      background: 'rgba(255, 255, 255, 0.1)',
      backdropFilter: 'blur(12px)',
      border: '1px solid rgba(255, 255, 255, 0.2)',
      borderRadius: theme('borderRadius.2xl'),
      boxShadow: theme('boxShadow.xl'),
    },
    '.prismatic-border': {
      position: 'relative',
      background: 'linear-gradient(135deg, rgba(147, 51, 234, 0.3) 0%, rgba(59, 130, 246, 0.3) 50%, rgba(236, 72, 153, 0.3) 100%)',
      padding: '1px',
      borderRadius: theme('borderRadius.2xl'),
    },
    // ... more components
  });
});

Add to your tailwind.config.js:

module.exports = {
  plugins: [
    require('./tailwind-liquid-glass'),
  ],
}

Method 3: Framework-Specific Packages

For Next.js

npm install liquid-glass-ui

// pages/_app.js
import 'liquid-glass-ui/liquid-glass.css';

// components/MyComponent.jsx
import { LiquidButton } from 'liquid-glass-ui';

export default function MyComponent() {
  return <LiquidButton>Hello</LiquidButton>;
}

For Vue.js

npm install @liquid-glass/vue

<template>
  <LiquidButton variant="primary">
    Click Me
  </LiquidButton>
</template>

<script>
import { LiquidButton } from '@liquid-glass/vue';
import '@liquid-glass/vue/dist/style.css';

export default {
  components: { LiquidButton }
}
</script>

For Vanilla JS/HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/liquid-glass-ui/dist/style.css">
</head>
<body>
  <div class="liquid-glass p-6 hover-glow">
    <h2>Liquid Glass Card</h2>
    <p>Beautiful glassmorphism effect</p>
  </div>
  
  <button class="liquid-glass px-6 py-3 interactive prismatic-border">
    Liquid Button
  </button>
</body>
</html>

Method 4: CDN Integration

Quick Start with CDN

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/liquid-glass-ui@latest/dist/liquid-glass.min.css">

<!-- Optional: Web Components version -->
<script src="https://cdn.jsdelivr.net/npm/liquid-glass-ui@latest/dist/liquid-glass-components.min.js"></script>

<!-- Usage -->
<liquid-button variant="primary">Click Me</liquid-button>
<liquid-card title="Card Title" description="Card description"></liquid-card>

🎨 Customization

CSS Custom Properties

Customize the design system by overriding CSS variables:

:root {
  /* Brand Colors */
  --liquid-primary: 147 51 234;     /* Your primary color (RGB) */
  --liquid-secondary: 59 130 246;   /* Your secondary color (RGB) */
  --liquid-accent: 236 72 153;      /* Your accent color (RGB) */
  
  /* Glass Properties */
  --liquid-glass-bg: rgba(255, 255, 255, 0.1);
  --liquid-glass-border: rgba(255, 255, 255, 0.2);
  --liquid-backdrop-blur: 12px;
  
  /* Animation Speed */
  --liquid-transition-speed: 300ms;
}

/* Dark/Light theme variations */
.dark-theme {
  --liquid-glass-bg: rgba(255, 255, 255, 0.1);
}

.light-theme {
  --liquid-glass-bg: rgba(255, 255, 255, 0.8);
}

Sass/SCSS Variables

// _liquid-glass-config.scss
$liquid-primary: (147, 51, 234);
$liquid-secondary: (59, 130, 246);
$liquid-glass-opacity: 0.1;
$liquid-blur-amount: 12px;
$liquid-border-radius: 1rem;

// Import after setting variables
@import 'liquid-glass-ui/scss/index';

📱 Responsive Usage

The components are mobile-first and responsive:

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <LiquidCard title="Mobile First" description="Responsive by default" />
  <LiquidCard title="Tablet Ready" description="Looks great on tablets" />
  <LiquidCard title="Desktop Perfect" description="Stunning on large screens" />
</div>

🎭 Theme Integration

With styled-components

import styled from 'styled-components';

const StyledLiquidCard = styled.div`
  ${tw`liquid-glass p-6 hover-glow`}
  background: ${props => props.theme.liquidGlass.background};
  backdrop-filter: blur(${props => props.theme.liquidGlass.blur});
`;

With emotion

import { css } from '@emotion/react';

const liquidCardStyle = css`
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(147, 51, 234, 0.4);
  }
`;

🛠️ Build Tools Integration

Webpack

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
    ],
  },
};

Vite

// vite.config.js
export default {
  css: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
};

Rollup

// rollup.config.js
import postcss from 'rollup-plugin-postcss';

export default {
  plugins: [
    postcss({
      extract: true,
      minimize: true,
    }),
  ],
};

📋 Component API

LiquidButton

interface LiquidButtonProps {
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  children: ReactNode;
  className?: string;
  onClick?: () => void;
}

LiquidCard

interface LiquidCardProps {
  title: string;
  description: string;
  icon?: ReactNode;
  gradient?: string;
  onClick?: () => void;
}

🎯 Production Tips

Performance: The backdrop-filter CSS property can be expensive. Consider using will-change: transform for animated elements.

Browser Support: Glassmorphism requires modern browsers. Provide fallbacks:

.liquid-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
     
  /* Fallback for older browsers */
  @supports not (backdrop-filter: blur(12px)) {
    background: rgba(255, 255, 255, 0.3);
  }
}

Bundle Size: Import only the components you need to keep bundle size small.
Accessibility: Always test with screen readers and keyboard navigation.

🚀 Quick Start Templates

Choose your preferred method and get started immediately! The liquid glass design system will transform your app into a modern, beautiful interface that users will love.

📄 License

MIT License - feel free to use in personal and commercial projects!