Zentak Glass UI 💎

A modern, highly customizable glassmorphism UI library built with React and Tailwind CSS. Elevate your next dashboard or client project with stunning, semi-transparent components equipped with smooth transitions and premium aesthetics.

✨ What's New (v1.0.8)

• NEW Component: Added SmartCartButton ✨ — A delightful animated "Add to Cart" button featuring a multi-stage animation with a sliding product box, cart icon, success ripple, and checkmark confirmation. Perfect for e-commerce UIs.
• All 16 components now fully production-ready and optimized.

Previous Highlights (v1.0.5 – v1.0.6)

• TaskBoard — Interactive daily task management board with glassmorphic progress bar and animated checkboxes.
• HolographicCard — Ultra-realistic 3D Visa Platinum card with double-sided flip animation and dynamic metallic glare.
• PasswordInput — Advanced password field with real-time strength validation, caps lock detection, and live requirements checklist.
• MagneticButton & GlassCard3D — Advanced pointer-driven motion components.
• Polished glass background theme with softer glow and smoother motion.
• Upgraded GlassSidebar with expandable hover navigation.

🌐 Live Demo

Check out the live interactive playground to view and interact with all components:
https://zentak-glass-ui.netlify.app

📦 Installation

Install the package via npm:

npm install zentak-glass-ui

If you want to lock to the latest published version:

npm install [email protected]

Notes:

• This library relies on Tailwind CSS. Ensure Tailwind is installed and configured.
• react and react-dom are peer dependencies.

🚀 Quick Start

Import any component and use it directly within your React application. The components are fully responsive right out of the box.

import React from 'react';
import { GlassButton, SmartCartButton } from 'zentak-glass-ui';

function App() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-indigo-900 to-fuchsia-900 p-10 flex items-center justify-center gap-8">
      <GlassButton onClick={() => alert('Clicked!')}>
        Click Me ✨
      </GlassButton>
      <SmartCartButton />
    </div>
  );
}

export default App;

🧩 Available Components (16)

Core Elements

| Component | Description | |-----------|-------------| | GlassButton | Premium interactive buttons with hover glow effects | | GlassInput | Semi-transparent text fields with modern focus rings | | GlassToggle | Smoothly animated toggle switches | | GlassBadge | Dynamic status badges in multiple semantic colors | | GlassToast | Sleek notification and alert popups | | GlassProfile | User identity cards with gradient avatars | | GlassCard | Responsive layout containers with strong backdrop blurs |

Complex UI Blocks

| Component | Description | |-----------|-------------| | SmartCartButton ✨ | Animated multi-stage "Add to Cart" button with product box, cart, ripple, and checkmark animations | | HolographicCard | Ultra-realistic 3D Visa card with double-sided flip and dynamic metallic glare | | TaskBoard | Interactive daily task board with glassmorphic progress bar and animated checkboxes | | GlassLoginForm | Fully designed, ready-to-use login panel with input handling | | PasswordInput | Password field with real-time strength validation and caps lock detection | | GlassSidebar | Vertical dashboard sidebar with expandable hover behavior and active states | | GlassPricing | Stunning 3-tier pricing table with emphasized 'Pro' focal tier | | GlassCard3D | Interactive 3D glass card with full-area mouse movement response | | MagneticButton | High-impact magnetic CTA with parallax text and neon border motion |

🛠️ Development

Run the project locally:

npm run dev

Build the component library:

npm run build:lib

Quality checks:

npm run lint
npm run build

🔗 Package

• NPM: https://www.npmjs.com/package/zentak-glass-ui
• Current release: 1.0.7

📄 License

This project is open-source and available under the MIT License.